<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.3.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","images":"/images","scheme":"Muse","version":"8.3.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}};
  </script>
<meta property="og:type" content="website">
<meta property="og:title" content="Lawted&#39;s Blog">
<meta property="og:url" content="http://example.com/page/7/index.html">
<meta property="og:site_name" content="Lawted&#39;s Blog">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Lawted Wu">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/page/7/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'en'
  };
</script>
<title>Lawted's Blog</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Lawted's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Lawted Wu</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">67</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/LAWTED" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;LAWTED" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



        </div>
      </div>
        <div class="back-to-top animated" role="button" aria-label="Back to top">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/28/axios/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/28/axios/" class="post-title-link" itemprop="url">axios基础</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>
      

      <time title="Created: 2021-01-28 11:23:46 / Modified: 11:25:31" itemprop="dateCreated datePublished" datetime="2021-01-28T11:23:46+08:00">2021-01-28</time>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="一-axios-的基本使用"><a href="#一-axios-的基本使用" class="headerlink" title="一.axios 的基本使用"></a>一.axios 的基本使用</h2><h4 id="axios发送get请求"><a href="#axios发送get请求" class="headerlink" title="axios发送get请求"></a>axios发送get请求</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;默认请求方式发送无参请求</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios(&#123;</span><br><span class="line">        url:&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;posts&#39;,</span><br><span class="line">    &#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">默认使用get方式请求</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;指定请求方式为get发送无参请求</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios(&#123;</span><br><span class="line">        url:&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;posts&#39;,</span><br><span class="line">        method:&#39;get&#39;</span><br><span class="line">    &#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;发送get方式有参请求-直接在url后面拼接?id&#x3D;1</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios(&#123;</span><br><span class="line">        url:&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments?id&#x3D;1&#39;,</span><br><span class="line">    &#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;发送get方式有参请求-使用params</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios(&#123;</span><br><span class="line">        url:&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;,</span><br><span class="line">        params:&#123;</span><br><span class="line">            id:&#39;1&#39;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<h4 id="axios发送post请求"><a href="#axios发送post请求" class="headerlink" title="axios发送post请求"></a>axios发送post请求</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;指定请求方式为post发送无参请求</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios(&#123;</span><br><span class="line">        url:&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;,</span><br><span class="line">        method:&#39;post&#39;</span><br><span class="line">    &#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios(&#123;</span><br><span class="line">        url:&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;,</span><br><span class="line">        method:&#39;post&#39;,</span><br><span class="line">        data:&#123;</span><br><span class="line">            id:&#39;3&#39;,</span><br><span class="line">            name:&#39;科技新闻&#39;,</span><br><span class="line">            post: &quot;2&quot;,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="二-axios请求方式"><a href="#二-axios请求方式" class="headerlink" title="二.axios请求方式"></a>二.axios请求方式</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;使用axios.get发送无参请求</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.get(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;).catch(err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;使用axios.get发送有参请求</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.get(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;,&#123;params:&#123;id:2&#125;&#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;).catch(err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;使用axios.post发送无参请求</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.post(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;).catch(err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;使用axios.post发送有参请求</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.post(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;,&#123;id:4,body:&quot;时尚新闻&quot;&#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;).catch(err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">or</span><br><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.post(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;,&quot;id&#x3D;4&amp;body&#x3D;时尚新闻&quot;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;).catch(err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>axios使用post携带参数默认使用application/json</p>
</blockquote>
<p>解决方法一：params属性进行数据传递</p>
<p>解决方法二：“name=张三&amp;id=1”</p>
<p>解决方法三：服务端给接受到的参数加上@requestbody</p>
<hr>
<h2 id="三-axios的并发请求"><a href="#三-axios的并发请求" class="headerlink" title="三.axios的并发请求"></a>三.axios的并发请求</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.all([</span><br><span class="line">        axios.get(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;),</span><br><span class="line">        axios.get(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;posts&#39;)</span><br><span class="line">    ]).then(</span><br><span class="line">        axios.spread((res1,res2)&#x3D;&gt;&#123;</span><br><span class="line">            console.log(res1);</span><br><span class="line">            console.log(res2);</span><br><span class="line">        &#125;)</span><br><span class="line">    ).catch(err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.all([</span><br><span class="line">        axios.get(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;comments&#39;),</span><br><span class="line">        axios.get(&#39;http:&#x2F;&#x2F;localhost:3008&#x2F;posts&#39;)</span><br><span class="line">    ]).then(res&#x3D;&gt;&#123;</span><br><span class="line">            console.log(res[0]);</span><br><span class="line">            console.log(&quot;----------&quot;)</span><br><span class="line">            console.log(res[1]);</span><br><span class="line">        &#125;</span><br><span class="line">    ).catch(err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="四-axios的全局配置"><a href="#四-axios的全局配置" class="headerlink" title="四.axios的全局配置"></a>四.axios的全局配置</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.defaults.baseURL&#x3D;&#39;http:&#x2F;&#x2F;localhost:3008&#39;;</span><br><span class="line">    &#x2F;&#x2F;axios.defaults.timeout&#x3D;5000;</span><br><span class="line">    axios.get(&#39;comments&#39;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;);</span><br><span class="line">    axios.get(&#39;posts&#39;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="五-axios的实例"><a href="#五-axios的实例" class="headerlink" title="五.axios的实例"></a>五.axios的实例</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    let newVar &#x3D; axios.create(&#123;</span><br><span class="line">        baseURL:&#39;http:&#x2F;&#x2F;localhost:3008&#39;,</span><br><span class="line">        &#x2F;&#x2F;timeout:5000</span><br><span class="line">    &#125;);&#x2F;&#x2F;创建axios的实例</span><br><span class="line">    newVar(&#123;</span><br><span class="line">        url:&#39;comments&#39;</span><br><span class="line">    &#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="六-axios的拦截器"><a href="#六-axios的拦截器" class="headerlink" title="六.axios的拦截器"></a>六.axios的拦截器</h2><figure class="highlight txt"><table><tr><td class="code"><pre><span class="line">axios 给我提供了两大拦截器 </span><br><span class="line">一种是请求方向的拦截（成功请求，失败请求）</span><br><span class="line">一种是响应方向的（成功响应，失败响应）</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.interceptors.request.use(config&#x3D;&gt;&#123;</span><br><span class="line">        console.log(config);&#x2F;&#x2F;可以在这里加载动画</span><br><span class="line">        return config;</span><br><span class="line">    &#125;,err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line">    &#125;)</span><br><span class="line">    axios.get(&quot;http:&#x2F;&#x2F;localhost:3008&#x2F;posts&quot;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;https:&#x2F;&#x2F;unpkg.com&#x2F;axios&#x2F;dist&#x2F;axios.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    axios.interceptors.response.use(config&#x3D;&gt;&#123;</span><br><span class="line">        console.log(config);&#x2F;&#x2F;可以在这里加载动画</span><br><span class="line">        return config.data;&#x2F;&#x2F;拦截后放行</span><br><span class="line">    &#125;,err&#x3D;&gt;&#123;</span><br><span class="line">        console.log(err);</span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line">    axios.get(&quot;http:&#x2F;&#x2F;localhost:3008&#x2F;posts&quot;).then(res&#x3D;&gt;&#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="七-axios在Vue中的模块封装"><a href="#七-axios在Vue中的模块封装" class="headerlink" title="七.axios在Vue中的模块封装"></a>七.axios在Vue中的模块封装</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//封装位置 /src/network/request/request.js</span></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&quot;axios&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">config,success,fail</span>)</span>&#123;</span><br><span class="line">  axios(&#123;</span><br><span class="line">    url:config</span><br><span class="line">  &#125;).then(<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">    success(res);</span><br><span class="line">  &#125;).catch(<span class="function"><span class="params">err</span>=&gt;</span>&#123;</span><br><span class="line">    fail(err);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用位置</span></span><br><span class="line"><span class="keyword">import</span> &#123;request&#125; <span class="keyword">from</span> <span class="string">&quot;./network/request/request&quot;</span>;</span><br><span class="line">request(</span><br><span class="line">  <span class="string">&quot;http://localhost:3008/comments&quot;</span>,</span><br><span class="line">  res=&gt;&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(res);</span><br><span class="line">  &#125;,</span><br><span class="line">  res=&gt;&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">  &#125;</span><br><span class="line">)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//封装位置</span></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&quot;axios&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">config</span>)</span>&#123;</span><br><span class="line">axios.defaults.baseURL=<span class="string">&quot;http://localhost:3008&quot;</span></span><br><span class="line">  axios(config.url).then(</span><br><span class="line">    res=&gt;&#123;</span><br><span class="line">      config.success(res);</span><br><span class="line">    &#125;</span><br><span class="line">  ).catch(<span class="function"><span class="params">err</span>=&gt;</span>&#123;</span><br><span class="line">      config.fail(res);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用位置</span></span><br><span class="line"><span class="keyword">import</span> &#123;request&#125; <span class="keyword">from</span> <span class="string">&quot;./network/request/request&quot;</span>;</span><br><span class="line">request(&#123;</span><br><span class="line">  url:<span class="string">&#x27;comments&#x27;</span>,</span><br><span class="line">  success:<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(res);</span><br><span class="line">  &#125;,</span><br><span class="line">  fail:<span class="function"><span class="params">err</span>=&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">  &#125;&#125;</span><br><span class="line">)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="最好的方法"><a href="#最好的方法" class="headerlink" title="最好的方法"></a>最好的方法</h5><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//封装位置</span></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&quot;axios&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">config</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> newVar = axios.create(&#123;</span><br><span class="line">    baseURL:<span class="string">&quot;http://localhost:3008&quot;</span>,</span><br><span class="line">    timeout:<span class="number">5000</span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> newVar(config)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用位置</span></span><br><span class="line"><span class="keyword">import</span> &#123;request&#125; <span class="keyword">from</span> <span class="string">&quot;./network/request/request&quot;</span>;</span><br><span class="line">request(&#123;</span><br><span class="line">  url:<span class="string">&quot;comments&quot;</span></span><br><span class="line">&#125;).then(<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(res);</span><br><span class="line">&#125;).catch(<span class="function"><span class="params">err</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>







      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/28/JavaScript/JavaScript/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/28/JavaScript/JavaScript/" class="post-title-link" itemprop="url">JavaScript基础</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-28 11:23:46" itemprop="dateCreated datePublished" datetime="2021-01-28T11:23:46+08:00">2021-01-28</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:31:00" itemprop="dateModified" datetime="2021-05-07T09:31:00+08:00">2021-05-07</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="JavaScript用法"><a href="#JavaScript用法" class="headerlink" title="JavaScript用法"></a>JavaScript用法</h2><ul>
<li>HTML中的脚本必须位于<script></script>标签之间</li>
<li>脚本可被放置在HTML页面的<body>和<head>中</li>
</ul>
<h2 id="JavaScript标签"><a href="#JavaScript标签" class="headerlink" title="JavaScript标签"></a>JavaScript标签</h2><ul>
<li>在HTMl中插入JavaScript，使用<script>标签</li>
<li>在<script></script>之间书写代码</li>
</ul>
<h2 id="JavaScript使用限制"><a href="#JavaScript使用限制" class="headerlink" title="JavaScript使用限制"></a>JavaScript使用限制</h2><ul>
<li>在HTML中，不限制脚本数量</li>
<li>通常会把脚本放置于<head>标签中，以不干扰页面内容</li>
</ul>
<h2 id="JS的语法和注释"><a href="#JS的语法和注释" class="headerlink" title="JS的语法和注释"></a>JS的语法和注释</h2><ul>
<li>语句之间的间隔是分号</li>
<li>JS的执行顺序是按编写顺序执行</li>
<li>JS的关键字不能使用</li>
<li>JS大小写敏感</li>
<li>注释和C语言一样</li>
</ul>
<h2 id="JS的变量"><a href="#JS的变量" class="headerlink" title="JS的变量"></a>JS的变量</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var x&#x3D;10；</span><br><span class="line">var string&#x3D;&quot;hello&quot;;</span><br><span class="line">var arr&#x3D;[1,2,3,4];</span><br><span class="line">var arr&#x3D;new Array(&quot;hello&quot;,&quot;jike&quot;,&quot;daojiahao&quot;);</span><br><span class="line">var arr&#x3D;new Array();</span><br><span class="line">arr[0]&#x3D;10;</span><br></pre></td></tr></table></figure>
<ul>
<li>任何类型和字符串相加都会变成字符串</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;p&gt;i&#x3D;10 j&#x3D;10&lt;&#x2F;p&gt;</span><br><span class="line">	&lt;p id&#x3D;&quot;sumid&quot;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">	&lt;botton onclick&#x3D;&quot;mysum()&quot;&gt;结果&lt;&#x2F;botton&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function mysum()&#123;</span><br><span class="line">	var i &#x3D; 10;</span><br><span class="line">	var j &#x3D; 10;</span><br><span class="line">	var m&#x3D;j+i;	document.getElementById(&quot;sumid&quot;).innerHTML&#x3D;m;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">两个&#x3D;&#x3D;</span><br><span class="line">字符串&quot;10&quot;可以和数字10相等</span><br><span class="line"></span><br><span class="line">三个&#x3D;&#x3D;&#x3D;</span><br><span class="line">字符串&quot;10&quot;可以和数字10相等</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="三则运算"><a href="#三则运算" class="headerlink" title="三则运算"></a>三则运算</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var i&#x3D;11;</span><br><span class="line">document.write(i&gt;10?&quot;i大于10&quot;:&quot;i小于10&quot;)；</span><br></pre></td></tr></table></figure>
<h2 id="if"><a href="#if" class="headerlink" title="if"></a>if</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">if(i&gt;&#x3D;10)&#123;</span><br><span class="line">	document.write(&quot;hello&quot;);</span><br><span class="line">&#125;</span><br><span class="line">else&#123;</span><br><span class="line">	....</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="switch"><a href="#switch" class="headerlink" title="switch"></a>switch</h2><p>和C++一样</p>
<h2 id="for"><a href="#for" class="headerlink" title="for"></a>for</h2><p>和C++一样</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var i&#x3D;[1,2,3,4];</span><br><span class="line">var j;</span><br><span class="line">for(j in i)&#123;</span><br><span class="line">	document.write(i[j]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="while"><a href="#while" class="headerlink" title="while"></a>while</h2><p>和C++一样</p>
<h2 id="alert"><a href="#alert" class="headerlink" title="alert"></a>alert</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">alert(i);</span><br></pre></td></tr></table></figure>
<p>弹出对话框,显示内容</p>
<h2 id="function"><a href="#function" class="headerlink" title="function"></a>function</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function demo(a,b)&#123;     &#x2F;&#x2F;不需要写类型</span><br><span class="line">	var sum&#x3D;a+b;</span><br><span class="line">	alert(sum);</span><br><span class="line">	&#125;</span><br><span class="line">	demo(10,20);</span><br><span class="line">function demo1(name,age)&#123;</span><br><span class="line">	alert(&quot;Hello:&quot;+name&quot;,我的今年&quot;+age+&quot;岁&quot;)；</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="局部变量和全局变量"><a href="#局部变量和全局变量" class="headerlink" title="局部变量和全局变量"></a>局部变量和全局变量</h2><p>全局变量不需要 var</p>
<h2 id="异常"><a href="#异常" class="headerlink" title="异常"></a>异常</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">try&#123;</span><br><span class="line">	alert(str);</span><br><span class="line">&#125;catch(err)&#123;</span><br><span class="line">	alert(err);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">		&lt;input id&#x3D;&quot;txt&quot; type&#x3D;&quot;text&quot;&gt;</span><br><span class="line">		&lt;input id&#x3D;&quot;btn&quot; type&#x3D;&quot;button&quot; onclick&#x3D;&quot;demo()&quot; value&#x3D;&quot;按钮&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">		function demo()&#123;</span><br><span class="line">			try&#123;</span><br><span class="line">				var e&#x3D;document.getElementById(&quot;txt&quot;).value;</span><br><span class="line">				if(e&#x3D;&#x3D;&quot;&quot;)&#123;</span><br><span class="line">					throw&quot;用户输入异常&quot;；</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;catch(err)&#123;</span><br><span class="line">				alert(err);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">onClick            单击事件</span><br><span class="line">onMouseOver        鼠标经过事件</span><br><span class="line">onMouseOut         鼠标移出事件</span><br><span class="line">onChange           文本内容改变事件</span><br><span class="line">onSelect           文本框选中事件</span><br><span class="line">onFocus            光标聚集事件</span><br><span class="line">onBlur             移开光标事件</span><br><span class="line">onLoad             网页加载事件</span><br><span class="line">onUnload           关闭网页事件</span><br></pre></td></tr></table></figure>
<h2 id="JS的DOM对象-Document-Object-Model"><a href="#JS的DOM对象-Document-Object-Model" class="headerlink" title="JS的DOM对象(Document Object Model)"></a>JS的DOM对象(Document Object Model)</h2><h2 id="DOM操作HTML"><a href="#DOM操作HTML" class="headerlink" title="DOM操作HTML"></a>DOM操作HTML</h2><ol>
<li>使用document.write(“”)来改变HTML</li>
</ol>
<p>==不要在文档加载完成之后使用document.write()，这会覆盖该文档==</p>
<ol start="2">
<li>寻找元素</li>
</ol>
<ul>
<li>通过id找到HTML元素</li>
<li>通过标签名找到HTML元素、</li>
</ul>
<ol start="3">
<li>改变HTML内容</li>
</ol>
<p>使用属性：innerHTML</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function demo()&#123;</span><br><span class="line">	var nv&#x3D;document.getElementById(&quot;pid&quot;).innerHTML&#x3D;&quot;hello&quot;;</span><br><span class="line">	</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ol start="4">
<li>改变HTML属性</li>
</ol>
<p>使用属性：attribute,例如href，src</p>
<h2 id="DOM操作CSS"><a href="#DOM操作CSS" class="headerlink" title="DOM操作CSS"></a>DOM操作CSS</h2><p>语法：document.getElementByid(id).style.background-color:…;</p>
<h2 id="DOM-EvenListener"><a href="#DOM-EvenListener" class="headerlink" title="DOM EvenListener"></a>DOM EvenListener</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;,function()&#123;</span><br><span class="line">alert(&quot;hello&quot;)&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var x&#x3D;document.getElementById(&quot;btn&quot;);</span><br><span class="line">x.addEventListener(&quot;click&quot;,hello);</span><br><span class="line">x.addEventListener(&quot;click&quot;,world);</span><br><span class="line">x.removeEventListener(&quot;click&quot;,hello);</span><br><span class="line">function hello()&#123;</span><br><span class="line">	alert(&quot;Hello&quot;);</span><br><span class="line">&#125;</span><br><span class="line">function world()&#123;</span><br><span class="line">	alert(&quot;world&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="JS事件流"><a href="#JS事件流" class="headerlink" title="JS事件流"></a>JS事件流</h2><ul>
<li>事件冒泡：最具体的元素接受，到最不具体的</li>
<li>事件捕获：最不具体的接受，到最具体的</li>
</ul>
<h2 id="JS事件的处理"><a href="#JS事件的处理" class="headerlink" title="JS事件的处理"></a>JS事件的处理</h2><h3 id="HTML事件的处理"><a href="#HTML事件的处理" class="headerlink" title="HTML事件的处理"></a>HTML事件的处理</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;div&quot;&gt;</span><br><span class="line">    &lt;button id&#x3D;&quot;btn&quot; onclick&#x3D;&quot;demo()&quot;&gt;按钮&lt;&#x2F;button&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">  &lt;script&gt;</span><br><span class="line">    function demo()&#123;</span><br><span class="line">	alert(&quot;Hello html事件处理&quot;);</span><br><span class="line">&#125;</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="DOM0级处理"><a href="#DOM0级处理" class="headerlink" title="DOM0级处理"></a>DOM0级处理</h3><p>把一个函数赋值给一个事件处理程序属性</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var btn&#x3D;document.getElementById(&quot;btn&quot;);</span><br><span class="line">btn.onclick&#x3D; function()&#123;alert(&quot;hello1&quot;)&#125;;   &#x2F;&#x2F;会被覆盖</span><br><span class="line">btn.onclick&#x3D; function()&#123;alert(&quot;hello2&quot;)&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="DOM2级事件处理"><a href="#DOM2级事件处理" class="headerlink" title="DOM2级事件处理"></a>DOM2级事件处理</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var btn1&#x3D;document.getElementById(&quot;btn&quot;);</span><br><span class="line">btn1.addEventListener(&quot;click&quot;,demo1);</span><br><span class="line">btn1.addEventListener(&quot;click&quot;,demo2);</span><br><span class="line">btn1.removeEventListener(&quot;click&quot;,demo3);</span><br><span class="line">function demo2()&#123;</span><br><span class="line">  alert(&quot;hello world&quot;);</span><br><span class="line">&#125;</span><br><span class="line">function demo1()&#123;</span><br><span class="line">  alert(&quot;hello&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="IE事件处理程序"><a href="#IE事件处理程序" class="headerlink" title="IE事件处理程序"></a>IE事件处理程序</h3><ul>
<li>attachEvent类似addEventListener</li>
<li>detachEvent类似removeEventListenr</li>
</ul>
<h2 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h2><p>在触发DOM事件的时候会产生一个对象</p>
<h3 id="事件对象event"><a href="#事件对象event" class="headerlink" title="事件对象event"></a>事件对象event</h3><h4 id="type：获取事件类型"><a href="#type：获取事件类型" class="headerlink" title="type：获取事件类型"></a>type：获取事件类型</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;,showtype);</span><br><span class="line">function showtype(event)&#123;</span><br><span class="line">	alert(event.type);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">输出：click</span><br></pre></td></tr></table></figure>
<h4 id="target：获取事件目标"><a href="#target：获取事件目标" class="headerlink" title="target：获取事件目标"></a>target：获取事件目标</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;,showtype);</span><br><span class="line">function showtype(event)&#123;</span><br><span class="line">	alert(event.target);</span><br><span class="line">&#125;</span><br><span class="line">输出：[object HTMLButtonElement]</span><br></pre></td></tr></table></figure>
<h4 id="stopPropagation：阻止事件冒泡"><a href="#stopPropagation：阻止事件冒泡" class="headerlink" title="stopPropagation：阻止事件冒泡"></a>stopPropagation：阻止事件冒泡</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;,showtype);</span><br><span class="line">document.getElementById(&quot;div&quot;).addEventListener(&quot;click&quot;,showdiv);</span><br><span class="line">function showtype(event)&#123;</span><br><span class="line">	alert(event.target);</span><br><span class="line">	event.stopPropagation();</span><br><span class="line">&#125;</span><br><span class="line">function showdiv()&#123;</span><br><span class="line">	alert(&quot;div&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="preventDefault：阻止事件默认行为"><a href="#preventDefault：阻止事件默认行为" class="headerlink" title="preventDefault：阻止事件默认行为"></a>preventDefault：阻止事件默认行为</h4><p><code>event.preventDefault();</code></p>
<h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><p>定义并创建对象实例</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">people &#x3D; new Object();</span><br><span class="line">people.name &#x3D; &quot;Lawted&quot;;</span><br><span class="line">people.age &#x3D; &quot;18&quot;;</span><br><span class="line">document.write(&quot;name: &quot;+people.name+&quot;,age:&quot;+people.age);</span><br><span class="line"></span><br><span class="line">people&#x3D;&#123;name:&quot;Lawted&quot;,age:&quot;30&quot;&#125;</span><br></pre></td></tr></table></figure>
<p>使用函数来定义对象，然后创建新的对象实例</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function people(name,age)&#123;</span><br><span class="line">	this._name&#x3D;name;</span><br><span class="line">	this._age&#x3D;age;</span><br><span class="line">&#125;</span><br><span class="line">son &#x3D; new people(&quot;Lawted&quot;,30);</span><br><span class="line">document.write(&quot;name:&quot;+son._name+&quot;&lt;br&#x2F;&gt;&quot;+ &quot;age:&quot;+son._age);</span><br></pre></td></tr></table></figure>

<h2 id="string字符串对象"><a href="#string字符串对象" class="headerlink" title="string字符串对象"></a>string字符串对象</h2><p>string对象：<br>字符串可以使用单引号和双引号</p>
<h3 id="在字符串中查找字符串：-indexOf"><a href="#在字符串中查找字符串：-indexOf" class="headerlink" title="在字符串中查找字符串：.indexOf()"></a>在字符串中查找字符串：.indexOf()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(str.indexOf(&quot;world&quot;));</span><br></pre></td></tr></table></figure>

<h3 id="字符串长度-length"><a href="#字符串长度-length" class="headerlink" title="字符串长度.length"></a>字符串长度.length</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(&quot;字符串长度：&quot;+str.length);</span><br></pre></td></tr></table></figure>
<p>返回位置，从0开始，如果没有则返回-1</p>
<h3 id="内容匹配-match"><a href="#内容匹配-match" class="headerlink" title="内容匹配.match()"></a>内容匹配.match()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(str.match(&quot;world&quot;)); </span><br></pre></td></tr></table></figure>
<p>如果有则返回内容，没有则返回null</p>
<h3 id="替换内容-replace"><a href="#替换内容-replace" class="headerlink" title="替换内容.replace()"></a>替换内容.replace()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(str.replace(&quot;world&quot;,&quot;nihao&quot;));</span><br></pre></td></tr></table></figure>
<p>两个参数，将内容替换</p>
<h3 id="字符串大小写转换toUpperCase-toLowerCase"><a href="#字符串大小写转换toUpperCase-toLowerCase" class="headerlink" title="字符串大小写转换toUpperCase()/toLowerCase()"></a>字符串大小写转换toUpperCase()/toLowerCase()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;Hello world&quot;;</span><br><span class="line">document.write(str.toUpperCase());</span><br></pre></td></tr></table></figure>
<h3 id="字符串转为数组strong-gt-split"><a href="#字符串转为数组strong-gt-split" class="headerlink" title="字符串转为数组strong&gt;split()"></a>字符串转为数组strong&gt;split()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var str&#x3D; &quot;hello,jike,xueyuan&quot;;</span><br><span class="line">var s&#x3D; str.split(&quot;,&quot;);</span><br><span class="line">document.write(s[1]);</span><br></pre></td></tr></table></figure>
<h2 id="Date日期对象"><a href="#Date日期对象" class="headerlink" title="Date日期对象"></a>Date日期对象</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var date &#x3D; new Date();</span><br><span class="line">document.write(date);</span><br></pre></td></tr></table></figure>
<h3 id="获取年份getFullyear"><a href="#获取年份getFullyear" class="headerlink" title="获取年份getFullyear"></a>获取年份getFullyear</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var date &#x3D; new Date();</span><br><span class="line">document.write(date.getFullYear());</span><br></pre></td></tr></table></figure>
<h3 id="设置时间"><a href="#设置时间" class="headerlink" title="设置时间"></a>设置时间</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var date &#x3D; new Date();</span><br><span class="line">date.setFullYear(2011,0,1);       &#x2F;&#x2F;年份，月份，日期  月份从0开始</span><br><span class="line">document.write(date)</span><br></pre></td></tr></table></figure>
<h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><p>使用单独的变量名来存储一系列的值</p>
<h3 id="数组的创建"><a href="#数组的创建" class="headerlink" title="数组的创建"></a>数组的创建</h3><p><code>var myArray=[&quot;Hello&quot;,&quot;iwen&quot;,&quot;ime&quot;];</code></p>
<h3 id="合并数组concat"><a href="#合并数组concat" class="headerlink" title="合并数组concat()"></a>合并数组concat()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a&#x3D;[&quot;hello&quot;,&quot;world&quot;];</span><br><span class="line">var b&#x3D;[&quot;Lawted&quot;,&quot;123&quot;];</span><br><span class="line">var c&#x3D;a.concat(b);</span><br><span class="line">document.write(c);</span><br></pre></td></tr></table></figure>
<h3 id="排序sort"><a href="#排序sort" class="headerlink" title="排序sort()"></a>排序sort()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a&#x3D;[&quot;1&quot;,&quot;2&quot;,&quot;67&quot;,&quot;4&quot;,&quot;-10&quot;];</span><br><span class="line">document.write(a.sort());</span><br></pre></td></tr></table></figure>
<p>降序排序</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a &#x3D; [&quot;1&quot;, &quot;2&quot;, &quot;67&quot;, &quot;4&quot;, &quot;-10&quot;];</span><br><span class="line">document.write(</span><br><span class="line">	a.sort(function (a, b) &#123;</span><br><span class="line">		return b - a;</span><br><span class="line">	&#125;)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<h3 id="在末尾追加push"><a href="#在末尾追加push" class="headerlink" title="在末尾追加push()"></a>在末尾追加push()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a&#x3D;[&quot;a&quot;,&quot;b&quot;];</span><br><span class="line">a.push(&quot;c&quot;);</span><br><span class="line">document.write(a);</span><br></pre></td></tr></table></figure>

<h3 id="翻转reverse"><a href="#翻转reverse" class="headerlink" title="翻转reverse()"></a>翻转reverse()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var a&#x3D;[&quot;c&quot;,&quot;b&quot;,&quot;a&quot;];</span><br><span class="line">document.write(a.reverse());</span><br></pre></td></tr></table></figure>
<h2 id="Math对象"><a href="#Math对象" class="headerlink" title="Math对象"></a>Math对象</h2><p>执行常见的算数任务</p>
<h3 id="四舍五入round"><a href="#四舍五入round" class="headerlink" title="四舍五入round()"></a>四舍五入round()</h3><p><code>document.write(Math.round(4.7));</code></p>
<h3 id="随机数random"><a href="#随机数random" class="headerlink" title="随机数random()"></a>随机数random()</h3><p><code>document.write(Math.random());</code></p>
<p>取0-10的随机整数</p>
<p><code>document.write(parseInt(Math.random()*10))</code></p>
<h3 id="最大数max-最小数min-绝对值abs"><a href="#最大数max-最小数min-绝对值abs" class="headerlink" title="最大数max()/最小数min()/绝对值abs()"></a>最大数max()/最小数min()/绝对值abs()</h3><p><code>document.write(Math.max(1,23,424,55));</code></p>
<h2 id="JSDOM对象控制HTML"><a href="#JSDOM对象控制HTML" class="headerlink" title="JSDOM对象控制HTML"></a>JSDOM对象控制HTML</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">getElementsByName()       获取name</span><br><span class="line">getElementsByTagName()    获取元素</span><br><span class="line">getAttribute()            获取元素属性</span><br><span class="line">setAttribute()            设置元素属性</span><br><span class="line">childNodes()              访问子结点</span><br><span class="line">parentNode()              访问父结点</span><br><span class="line">createElement()           创建元素结点</span><br><span class="line">createTextNode            创建文本结点</span><br><span class="line">insertBefore()            插入结点</span><br><span class="line">removeChild()             删除结点</span><br><span class="line">offsetHeight              网页尺寸，不包含滚动条</span><br><span class="line">scrollHeight              网页尺寸，包含滚动条</span><br></pre></td></tr></table></figure>
<h3 id="获取元素-getElementsByTagName"><a href="#获取元素-getElementsByTagName" class="headerlink" title="获取元素 getElementsByTagName()"></a>获取元素 getElementsByTagName()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getName()&#123;</span><br><span class="line">	var count&#x3D;document.getElementsByTagName(&quot;p&quot;)</span><br><span class="line">	var p &#x3D; count[3];</span><br><span class="line">	p.innerHTML&#x3D;&quot;World&quot;;</span><br><span class="line">&#125;</span><br><span class="line">getName();</span><br></pre></td></tr></table></figure>
<h3 id="获取属性-getAttribute"><a href="#获取属性-getAttribute" class="headerlink" title="获取属性 getAttribute()"></a>获取属性 getAttribute()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">HTML</span><br><span class="line">&lt;a id&#x3D;&quot;aid&quot; title&#x3D;&quot;标签&quot;&gt;world&lt;&#x2F;a&gt;</span><br><span class="line"></span><br><span class="line">JS</span><br><span class="line">function getAttr()&#123;</span><br><span class="line">	var anode&#x3D;document.getElementById(&quot;aid&quot;);</span><br><span class="line">	var attr&#x3D;anode.getAttribute(&quot;title&quot;);</span><br><span class="line">	alert(attr);</span><br><span class="line">&#125;</span><br><span class="line">getAttr();</span><br></pre></td></tr></table></figure>
<h3 id="设置新属性-setAttribute"><a href="#设置新属性-setAttribute" class="headerlink" title="设置新属性 setAttribute()"></a>设置新属性 setAttribute()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getAttr()&#123;</span><br><span class="line">	var anode&#x3D;document.getElementById(&quot;aid&quot;);</span><br><span class="line">	anode.setAttribute(&quot;title&quot;,&quot;新的属性&quot;);</span><br><span class="line">	alert(anode.getAttribute(&quot;title&quot;));</span><br><span class="line">&#125;</span><br><span class="line">getAttr();</span><br></pre></td></tr></table></figure>
<h3 id="访问子结点-chidNodes"><a href="#访问子结点-chidNodes" class="headerlink" title="访问子结点 chidNodes"></a>访问子结点 chidNodes</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getchildnode() &#123;</span><br><span class="line">	var childnode &#x3D; document.getElementsByTagName(&quot;ul&quot;)[0].childNodes;</span><br><span class="line">	alert(childnode.length);</span><br><span class="line">&#125;</span><br><span class="line">getchildnode();</span><br></pre></td></tr></table></figure>
<h3 id="添加一个节点-createElement"><a href="#添加一个节点-createElement" class="headerlink" title="添加一个节点 createElement()"></a>添加一个节点 createElement()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function createNode()&#123;</span><br><span class="line">  var body&#x3D;document.body;</span><br><span class="line">  var input&#x3D;document.createElement(&quot;input&quot;);</span><br><span class="line">  input.type&#x3D;&quot;button&quot;;</span><br><span class="line">  input.value&#x3D;&quot;按钮&quot;;</span><br><span class="line">  body.appendChild(input);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">createNode();</span><br></pre></td></tr></table></figure>
<h3 id="插入一个节点-insertBefore"><a href="#插入一个节点-insertBefore" class="headerlink" title="插入一个节点 .insertBefore()"></a>插入一个节点 .insertBefore()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">  &lt;div id&#x3D;&quot;div&quot;&gt;</span><br><span class="line">    &lt;p id&#x3D;&quot;pid&quot;&gt;这是一个坐标&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">function addNode()&#123;</span><br><span class="line">	var div&#x3D;document.getElementById(&quot;div&quot;);</span><br><span class="line">  	var node&#x3D;document.getElementById(&quot;pid&quot;);</span><br><span class="line">  	var newnode&#x3D;document.createElement(&quot;p&quot;);</span><br><span class="line">  	newnode.innerHTML&#x3D;&quot;动态添加一个&quot;</span><br><span class="line">  	div.insertBefore(newnode,node);</span><br><span class="line">&#125;</span><br><span class="line">addNode();</span><br></pre></td></tr></table></figure>
<h3 id="删除结点-removeChild"><a href="#删除结点-removeChild" class="headerlink" title="删除结点 .removeChild()"></a>删除结点 .removeChild()</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function removeNode()&#123;</span><br><span class="line">	var div&#x3D;document.getElementById(&quot;div&quot;);</span><br><span class="line">	var p&#x3D;div.removeChild(div.childNodes[1]);</span><br><span class="line">&#125;</span><br><span class="line">removeNode();</span><br></pre></td></tr></table></figure>
<h3 id="网页尺寸"><a href="#网页尺寸" class="headerlink" title="网页尺寸"></a>网页尺寸</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getSize()&#123;</span><br><span class="line">	var width&#x3D;document.documentElement.offsetWidth;</span><br><span class="line">  	alert(width);</span><br><span class="line">  	var height&#x3D;document.documentElement.offsetHeight;</span><br><span class="line">  	alert(height);</span><br><span class="line">&#125;</span><br><span class="line">getSize();</span><br></pre></td></tr></table></figure>

<h2 id="window对象"><a href="#window对象" class="headerlink" title="window对象"></a>window对象</h2><ul>
<li>window对象是BOM的核心、window对象指当前的浏览器窗口</li>
<li>所有JS全局对象、函数以及变量均自动成为window对象的成员</li>
</ul>
<h3 id="window尺寸"><a href="#window尺寸" class="headerlink" title="window尺寸"></a>window尺寸</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">document.write(&quot;宽度：&quot;+window.innerWidth+&quot;高度：&quot;+window.innerHeight)</span><br></pre></td></tr></table></figure>
<ul>
<li>window.innerWidth  浏览器窗口的内部宽度</li>
<li>window.innerHeight  浏览器窗口的内部高度</li>
<li>window.open         打开页面</li>
<li>window.close        关闭页面</li>
</ul>
<h2 id="计时器"><a href="#计时器" class="headerlink" title="计时器"></a>计时器</h2><p>通过JS，在设定的时间间隔之后来执行，而不是在函数被调用后立即执行</p>
<h3 id="计时方法"><a href="#计时方法" class="headerlink" title="计时方法"></a>计时方法</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">setinterval()    间隔指定的毫秒数不停的执行指定代码</span><br><span class="line">clearinterval()  用来停止setinterval()方法执行的函数代码</span><br><span class="line">setTimeout()     暂停指定的毫秒数之后执行指定的代码</span><br><span class="line">clearTimeout()   用来停止setTimeout()方法执行的函数代码</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">  &lt;p id&#x3D;&quot;ptime&quot;&gt;&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;button onclick&#x3D;&quot;stoptime()&quot;&gt;按钮&lt;&#x2F;button&gt;</span><br><span class="line"></span><br><span class="line">var mytime&#x3D;setInterval(function()&#123;getTime()&#125;);</span><br><span class="line">function getTime()&#123;</span><br><span class="line">  var d&#x3D; new Date();</span><br><span class="line">  var t&#x3D; d.toLocaleTimeString();</span><br><span class="line">  document.getElementById(&quot;ptime&quot;).innerHTML&#x3D;t;</span><br><span class="line">&#125;</span><br><span class="line">function stoptime()&#123;</span><br><span class="line">	clearInterval(mytime);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="History-对象"><a href="#History-对象" class="headerlink" title="History 对象"></a>History 对象</h2><p>window.history 对象包含浏览器的历史（url）的集合</p>
<h3 id="History-方法"><a href="#History-方法" class="headerlink" title="History 方法"></a>History 方法</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">history.back()      浏览器后退按钮</span><br><span class="line">history.forward()   浏览器前进按钮</span><br><span class="line">history.go()        进入历史中的某个界面</span><br></pre></td></tr></table></figure>
<h2 id="Location-对象"><a href="#Location-对象" class="headerlink" title="Location 对象"></a>Location 对象</h2><p>window.location对象用于获得当前页面的地址，并把浏览器重定向到新的页面</p>
<h3 id="Location对象的属性"><a href="#Location对象的属性" class="headerlink" title="Location对象的属性"></a>Location对象的属性</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">location.hostname    返回web主机的域名</span><br><span class="line">location.pathname    返回当前页面的路径和文件名</span><br><span class="line">location.port        返回web主机的端口</span><br><span class="line">location.protocol    返回所使用的web协议</span><br><span class="line">location.href        返回当前页面的url</span><br><span class="line">location.assign()    加载新文档</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function get()&#123;</span><br><span class="line">document.getElementById(&quot;ptime&quot;).innerHTML&#x3D;window.location.href</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="screen-对象"><a href="#screen-对象" class="headerlink" title="screen 对象"></a>screen 对象</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">screen.availWidth     可用屏幕宽度</span><br><span class="line">screen.availHeight    可用屏幕高度</span><br><span class="line">screen.height         屏幕高度</span><br><span class="line">screen.width          屏幕宽度</span><br></pre></td></tr></table></figure>
<h2 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">(function()&#123;function People()&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">People.prototype.say&#x3D;function()&#123;</span><br><span class="line">	alert(&quot;hello&quot;);</span><br><span class="line">&#125;&#125;());                             &#x2F;&#x2F;封装</span><br><span class="line"></span><br><span class="line">function Student()&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">Student.prototype &#x3D; new People();</span><br><span class="line">var s&#x3D;new Student();</span><br><span class="line">s.say();</span><br></pre></td></tr></table></figure>



      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/28/HTML/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/28/HTML/" class="post-title-link" itemprop="url">HTML基础</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>
      

      <time title="Created: 2021-01-28 11:23:46 / Modified: 11:25:10" itemprop="dateCreated datePublished" datetime="2021-01-28T11:23:46+08:00">2021-01-28</time>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="HTML标准格式"><a href="#HTML标准格式" class="headerlink" title="HTML标准格式"></a>HTML标准格式</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;h1&gt;标题1&lt;&#x2F;h1&gt;</span><br><span class="line">	&lt;h2&gt;标题2&lt;&#x2F;h2&gt;</span><br><span class="line">	&lt;h3&gt;标题3&lt;&#x2F;h3&gt;</span><br><span class="line">	&lt;h4&gt;标题4&lt;&#x2F;h4&gt;</span><br><span class="line">	&lt;h5&gt;标题5&lt;&#x2F;h5&gt;</span><br><span class="line">	&lt;h6&gt;标题6&lt;&#x2F;h6&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="对齐"><a href="#对齐" class="headerlink" title="对齐"></a>对齐</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;对齐方式&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;h1&gt;这是一级标题&lt;&#x2F;h1&gt;</span><br><span class="line">&lt;h2 align&#x3D;&quot;left&quot;&gt;这是二级标题&lt;&#x2F;h2&gt;</span><br><span class="line">&lt;h3 align&#x3D;&quot;center&quot;&gt;这是三级标题&lt;&#x2F;h3&gt;</span><br><span class="line">&lt;h4 align&#x3D;&quot;right&quot;&gt;这是四级标题&lt;&#x2F;h4&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="段落"><a href="#段落" class="headerlink" title="段落"></a>段落</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!doctype html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;段落标签&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;p align&#x3D;&quot;right&quot;&gt;hello world&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<p><strong>段落会空一行！</strong></p>
<h3 id="HTML的格式化标签"><a href="#HTML的格式化标签" class="headerlink" title="HTML的格式化标签"></a>HTML的格式化标签</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;b&gt;        定义粗体文本</span><br><span class="line">&lt;big&gt;      定义大号字（不使用）</span><br><span class="line">&lt;em&gt;       定义着重文字</span><br><span class="line">&lt;i&gt;        定义斜体字</span><br><span class="line">&lt;small&gt;    定义小号字</span><br><span class="line">&lt;strong&gt;   定义加重语气</span><br><span class="line">&lt;sub&gt;      定义下标字</span><br><span class="line">&lt;sup&gt;      定义上标字</span><br><span class="line">&lt;ins&gt;      定义插入字</span><br><span class="line">&lt;del&gt;      定义删除字</span><br></pre></td></tr></table></figure>
<h3 id="HTML样式"><a href="#HTML样式" class="headerlink" title="HTML样式"></a>HTML样式</h3><h4 id="外部样式表"><a href="#外部样式表" class="headerlink" title="外部样式表"></a>外部样式表</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;mystyle.css&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>外部样式表写到head中</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">h1</span>&#123;</span><br><span class="line">	<span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="内部样式表"><a href="#内部样式表" class="headerlink" title="内部样式表"></a>内部样式表</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;style type&#x3D;&quot;text&#x2F;csss&quot;&gt;</span><br><span class="line">body&#123;background-color:red&#125;</span><br><span class="line">	p&#123;</span><br><span class="line">		margin-left:20px</span><br><span class="line">	&#125;</span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>

<h4 id="内联样式表"><a href="#内联样式表" class="headerlink" title="内联样式表"></a>内联样式表</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;p style&#x3D;&quot;color:red&quot;&gt;你好&lt;&#x2F;p&gt;</span><br></pre></td></tr></table></figure>

<h3 id="HTML链接"><a href="#HTML链接" class="headerlink" title="HTML链接"></a>HTML链接</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;www.baidu.com&quot;&gt;点击我&lt;&#x2F;a&gt;</span><br><span class="line"></span><br><span class="line">&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;www.baidu.com&quot;&gt;</span><br><span class="line">	&lt;img src:&quot;xxx.png&quot; width&#x3D;&quot;100px&quot; height&#x3D;&quot;100px&quot; alt&#x3D;&quot;这是一个html的&quot;&gt;</span><br><span class="line">&lt;&#x2F;a&gt; </span><br><span class="line"></span><br><span class="line">&lt;a name&#x3D;&quot;tips&quot;&gt;hello&lt;&#x2F;a&gt;</span><br><span class="line">&lt;br&#x2F;&gt;</span><br><span class="line">&lt;a href&#x3D;&quot;#tips&quot;&gt;跳转到hello&lt;&#x2F;a&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>href属性：指向另一个文档的链接</li>
<li>name属性:创建文档内的链接</li>
</ul>
<p>img标签属性</p>
<ul>
<li>alt：替换文本属性</li>
<li>width：宽</li>
<li>height：高</li>
</ul>
<h3 id="HTML表格"><a href="#HTML表格" class="headerlink" title="HTML表格"></a>HTML表格</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;table&gt;     定义表格</span><br><span class="line">&lt;caption&gt;   定义表格标题</span><br><span class="line">&lt;th&gt;        定义表格的表头</span><br><span class="line">&lt;tr&gt;        定义表格的行</span><br><span class="line">&lt;td&gt;        定义表格的单元</span><br><span class="line">&lt;thead&gt;     定义表格的页眉</span><br><span class="line">&lt;tbody&gt;     定义表格的主体</span><br><span class="line">&lt;tfoot&gt;     定义表格的页脚</span><br><span class="line">&lt;col&gt;       定义表格的列属性</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;table border&#x3D;&quot;10&quot; cellpadding&#x3D;&quot;100&quot;&gt;</span><br><span class="line">		&lt;caption&gt; test表格 &lt;&#x2F;caption&gt;</span><br><span class="line">		&lt;tr&gt;</span><br><span class="line">			&lt;th&gt;单元&lt;&#x2F;th&gt;</span><br><span class="line">			&lt;th&gt;	单元&lt;&#x2F;th&gt;</span><br><span class="line">			&lt;th&gt;单元&lt;&#x2F;th&gt;</span><br><span class="line">		&lt;&#x2F;tr&gt;</span><br><span class="line">		&lt;tr&gt;</span><br><span class="line">			&lt;td&gt;单元格1&lt;&#x2F;td&gt;</span><br><span class="line">			&lt;td&gt;单元格2&lt;&#x2F;td&gt;</span><br><span class="line">			&lt;td&gt;单元格3&lt;&#x2F;td&gt;</span><br><span class="line">		&lt;&#x2F;tr&gt;</span><br><span class="line">		&lt;tr&gt;</span><br><span class="line">			&lt;td&gt;单元格1&lt;&#x2F;td&gt;</span><br><span class="line">			&lt;td&gt;单元格2&lt;&#x2F;td&gt;</span><br><span class="line">			&lt;td&gt;单元格3&lt;&#x2F;td&gt;</span><br><span class="line">		&lt;&#x2F;tr&gt;</span><br><span class="line">	&lt;table&gt;</span><br><span class="line">&lt;body&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>border边框写在table中</li>
<li>cellpadding单元格大小写在table中</li>
<li>bgcolor背景颜色写在table中</li>
<li>background背景图片写在table中</li>
</ul>
<h3 id="HTML列表"><a href="#HTML列表" class="headerlink" title="HTML列表"></a>HTML列表</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ol&gt;      有序列表</span><br><span class="line">&lt;ul&gt;      无序列表</span><br><span class="line">&lt;li&gt;      列表项</span><br><span class="line">&lt;dl&gt;      列表</span><br><span class="line">&lt;dt&gt;      列表项</span><br><span class="line">&lt;dd&gt;      描述</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;ul&gt;</span><br><span class="line">		&lt;li&gt;苹果&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;li&gt;西瓜&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;li&gt;梨子&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;&#x2F;ul&gt;</span><br><span class="line">	&lt;ol&gt;</span><br><span class="line">		&lt;li&gt;苹果&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;li&gt;西瓜&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;li&gt;梨子&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;&#x2F;ul&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h4 id="无序列表"><a href="#无序列表" class="headerlink" title="无序列表"></a>无序列表</h4><ul>
<li>使用标签：<code>&lt;ul&gt;、&lt;li&gt;</code></li>
<li>属性：disc、circle、square(写在ul中)</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ul type&#x3D;&quot;square&quot;&gt;</span><br><span class="line">	&lt;li&gt;iOS&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;li&gt;android&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;li&gt;html5&lt;&#x2F;li&gt;</span><br><span class="line">&lt;&#x2F;ul&gt;</span><br></pre></td></tr></table></figure>
<h4 id="有序列表"><a href="#有序列表" class="headerlink" title="有序列表"></a>有序列表</h4><ul>
<li>使用标签：<code>&lt;ol&gt;、&lt;li&gt;</code></li>
<li>属性：A、a、I、i、start</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ol type&#x3D;&quot;A&quot;&gt;</span><br><span class="line">	&lt;li&gt;iOS&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;li&gt;android&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;li&gt;html5&lt;&#x2F;li&gt;</span><br><span class="line">&lt;&#x2F;ol&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ol start&#x3D;&quot;10&quot;&gt;</span><br><span class="line">	&lt;li&gt;iOS&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;li&gt;android&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;li&gt;html5&lt;&#x2F;li&gt;</span><br><span class="line">&lt;&#x2F;ol&gt;</span><br></pre></td></tr></table></figure>
<p>start表示从多少开始</p>
<h4 id="嵌套列表"><a href="#嵌套列表" class="headerlink" title="嵌套列表"></a>嵌套列表</h4><ul>
<li>使用标签：<code>&lt;ul&gt;、&lt;ol&gt;、&lt;li&gt;</code></li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;ol&gt;</span><br><span class="line">	&lt;li&gt;宠物&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;ul&gt;</span><br><span class="line">			&lt;li&gt;猫&lt;&#x2F;li&gt;</span><br><span class="line">			&lt;li&gt;狗&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;&#x2F;ul&gt;</span><br><span class="line">	&lt;li&gt;人类&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;ul&gt;</span><br><span class="line">			&lt;li&gt;男人&lt;&#x2F;li&gt;</span><br><span class="line">			&lt;li&gt;女人&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;&#x2F;ul&gt;</span><br><span class="line">	&lt;li&gt;植物&lt;&#x2F;li&gt;</span><br><span class="line">&lt;&#x2F;ol&gt;</span><br></pre></td></tr></table></figure>
<h4 id="自定义列表"><a href="#自定义列表" class="headerlink" title="自定义列表"></a>自定义列表</h4><ul>
<li>使用标签：<code>&lt;dl&gt;、&lt;dt&gt;、&lt;dd&gt;</code></li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;dl&gt;</span><br><span class="line">&lt;dt&gt;helloworld&lt;&#x2F;dt&gt;</span><br><span class="line">	&lt;dd&gt;这是html中的helloworld&lt;dd&gt;</span><br><span class="line">&lt;dt&gt;你好&lt;&#x2F;dt&gt;</span><br><span class="line">&lt;dt&gt;holla&lt;&#x2F;dt&gt;</span><br><span class="line">&lt;&#x2F;dt&gt;</span><br></pre></td></tr></table></figure>
<h3 id="HTML块"><a href="#HTML块" class="headerlink" title="HTML块"></a>HTML块</h3><h4 id="HTML块元素"><a href="#HTML块元素" class="headerlink" title="HTML块元素"></a>HTML块元素</h4><ul>
<li>块元素在显示时，通常会以新行开始</li>
<li>如：<code>&lt;h1&gt;、&lt;p&gt;、&lt;ul&gt;</code></li>
</ul>
<h4 id="HTML内联元素"><a href="#HTML内联元素" class="headerlink" title="HTML内联元素"></a>HTML内联元素</h4><ul>
<li>内联元素通常不会以新行开始</li>
<li>如：<code>&lt;b&gt;、&lt;a&gt;、&lt;img&gt;</code></li>
</ul>
<h4 id="HTML-lt-div-gt-元素"><a href="#HTML-lt-div-gt-元素" class="headerlink" title="HTML&lt;div&gt;元素"></a>HTML<code>&lt;div&gt;</code>元素</h4><ul>
<li><code>&lt;div&gt;</code>元素也被称为块元素，主要是组合HTML元素的容器</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;123&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">p</span>&gt;</span>hello world<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">a</span>&gt;</span>点击我<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#123</span> <span class="selector-tag">p</span>&#123;</span><br><span class="line">	<span class="attribute">color</span>:red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//只有<span class="selector-tag">p</span>标签变化，因为<span class="selector-id">#123</span> 后面写了<span class="selector-tag">p</span></span><br></pre></td></tr></table></figure>
<p>需要引入css</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;lingk rel&#x3D;&quot;stylesheet&quot; type&#x3D;&quot;text&#x2F;css&quot; href&#x3D;&quot;mycss.css&quot;&gt;</span><br></pre></td></tr></table></figure>
<h4 id="HTML-lt-span-gt-元素"><a href="#HTML-lt-span-gt-元素" class="headerlink" title="HTML&lt;span&gt;元素"></a>HTML<code>&lt;span&gt;</code>元素</h4><ul>
<li><code>&lt;span&gt;</code>元素是内联元素，可作为文本的容器</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">	&lt;p&gt;&lt;span&gt;这是一个测试效果&lt;&#x2F;span&gt;是什么样子&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br></pre></td></tr></table></figure>
<p>只改变span的效果，并且需要引入css</p>
<h3 id="HTML布局"><a href="#HTML布局" class="headerlink" title="HTML布局"></a>HTML布局</h3><h4 id="使用-lt-div-gt-元素布局"><a href="#使用-lt-div-gt-元素布局" class="headerlink" title="使用&lt;div&gt;元素布局"></a>使用<code>&lt;div&gt;</code>元素布局</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">	&lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;div布局&lt;&#x2F;title&gt;</span><br><span class="line">	&lt;style type&#x3D;&quot;text&#x2F;css&quot;&gt;</span><br><span class="line">		body&#123;</span><br><span class="line">			margin:0px;</span><br><span class="line">		&#125;</span><br><span class="line">		#container&#123;</span><br><span class="line">			width:100%;</span><br><span class="line">			height:950px;</span><br><span class="line">			background-color:gray;</span><br><span class="line">		&#125;</span><br><span class="line">		#heading&#123;</span><br><span class="line">			width:100%;</span><br><span class="line">			height:10%;</span><br><span class="line">			background-color:red;</span><br><span class="line">			float:left;		</span><br><span class="line">		&#125;</span><br><span class="line">		#content_menu&#123;</span><br><span class="line">			width:30%;</span><br><span class="line">			height:80%;</span><br><span class="line">			background-color:blue;</span><br><span class="line">			float:left;</span><br><span class="line">		&#125;</span><br><span class="line">		#content_body&#123;</span><br><span class="line">			width:70%;</span><br><span class="line">			height:80%;</span><br><span class="line">			background-color:purple;</span><br><span class="line">			float:left;</span><br><span class="line">		&#125;</span><br><span class="line">		#footing&#123;</span><br><span class="line">			width:100%;</span><br><span class="line">			height:10%;</span><br><span class="line">			background-color:black;</span><br><span class="line">			clear:both;</span><br><span class="line">		&#125;</span><br><span class="line">	&lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div id&#x3D;&quot;container&quot;&gt;</span><br><span class="line">		&lt;div id&#x3D;&quot;heading&quot;&gt;头部&lt;&#x2F;div&gt;</span><br><span class="line">		&lt;div id&#x3D;&quot;content_menu&quot;&gt;内容菜单&lt;&#x2F;div&gt;</span><br><span class="line">		&lt;div id&#x3D;&quot;content_body&quot;&gt;内容主体&lt;&#x2F;div&gt;</span><br><span class="line">		&lt;div id&#x3D;&quot;footing&quot;&gt;底部&lt;&#x2F;div&gt;</span><br><span class="line">	&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="使用-lt-table-gt-元素布局"><a href="#使用-lt-table-gt-元素布局" class="headerlink" title="使用&lt;table&gt;元素布局"></a>使用<code>&lt;table&gt;</code>元素布局</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">	&lt;mata charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;table布局&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body marginheight&#x3D;&quot;0px&quot; marginwidth&#x3D;&quot;0px&quot;&gt;</span><br><span class="line">&lt;table width&#x3D;&quot;100%&quot; height&#x3D;&quot;950px&quot; style&#x3D;&quot;background:darkgrey&quot;&gt;</span><br><span class="line">	&lt;tr&gt;</span><br><span class="line">		&lt;td colspan&#x3D;&quot;2&quot; width&#x3D;&quot;100%&quot; height&#x3D;&quot;10%&quot; style&#x3D;&quot;background-color&#x3D;black&quot;&gt;头部</span><br><span class="line">		&lt;&#x2F;td&gt;</span><br><span class="line">	&lt;&#x2F;tr&gt;</span><br><span class="line">	&lt;tr&gt;</span><br><span class="line">		&lt;td width&#x3D;&quot;30%&quot; height&#x3D;&quot;80%&quot; style&#x3D;&quot;background-color&#x3D;red&quot;&gt;左菜单&lt;&#x2F;td&gt;</span><br><span class="line">		&lt;td width&#x3D;&quot;70%&quot; height&#x3D;&quot;80%&quot; style&#x3D;&quot;bakcground-color&#x3D;red&quot;&gt;右菜单&lt;&#x2F;td&gt;</span><br><span class="line">	&lt;tr&gt;</span><br><span class="line">		&lt;td colspan&#x3D;&quot;2&quot; width&#x3D;&quot;100%&quot; height&#x3D;&quot;10%&quot; style&#x3D;&quot;bakcground-color&#x3D;gray&quot;&gt;底部</span><br><span class="line">	&lt;&#x2F;tr&gt;</span><br><span class="line">&lt;&#x2F;table&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<h3 id="HTML表单"><a href="#HTML表单" class="headerlink" title="HTML表单"></a>HTML表单</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form&gt;      表单</span><br><span class="line">&lt;input&gt;     输入域</span><br><span class="line">&lt;textarea&gt;  文本域</span><br><span class="line">&lt;label&gt;     控制标签</span><br><span class="line">&lt;fieldset&gt;  定义域</span><br><span class="line">&lt;legend&gt;    域的标题</span><br><span class="line">&lt;select&gt;    选择列表</span><br><span class="line">&lt;optgroup&gt;  选组组</span><br><span class="line">&lt;option&gt;    下拉列表中的选项</span><br><span class="line">&lt;button&gt;    按钮</span><br></pre></td></tr></table></figure>

<body>
    <form>
        用户名：
        <input type="text">
        密码
        <input type="password">
    </form>
</body>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">code:</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">		用户名：</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot;&gt;</span><br><span class="line">		密码</span><br><span class="line">		&lt;input type&#x3D;&quot;password&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h4 id="复选框-checkbox"><a href="#复选框-checkbox" class="headerlink" title="复选框(checkbox)"></a>复选框(checkbox)</h4><body>
    <form>
    <p>你喜欢的语言有？</p>
    C++<input type="checkbox">
    JAVA<input type="checkbox">
    Python<input type="checkbox">
    </form>
</body>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">	&lt;p&gt;你喜欢的语言有？&lt;&#x2F;p&gt;</span><br><span class="line">	C++&lt;input type&#x3D;&quot;checkbox&quot;&gt;</span><br><span class="line">	JAVA&lt;input type&#x3D;&quot;checkbox&quot;&gt;</span><br><span class="line">	Python&lt;input type&#x3D;&quot;checkbox&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>

<h4 id="单选按钮-radio"><a href="#单选按钮-radio" class="headerlink" title="单选按钮(radio)"></a>单选按钮(radio)</h4><body>
    <form>
    请选择你的性别：
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
    </form>
</body>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">	请选择你的性别：</span><br><span class="line">	男&lt;input type&#x3D;&quot;radio&quot; name&#x3D;&quot;sex&quot;&gt;</span><br><span class="line">	女&lt;input type&#x3D;&quot;radio&quot; name&#x3D;&quot;sex&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<p>name就是一个组的概念，只有在同一个组才能实现单选</p>
<h4 id="下拉列表-select"><a href="#下拉列表-select" class="headerlink" title="下拉列表(select)"></a>下拉列表(select)</h4><body>
<select>
    <option>iPhone 12 mini</option>
    <option>iPhone 12</option>
    <option>iPhone 12 Pro</option>
    <option>iPhone 12 ProMax</option>
</select>
</body>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">&lt;select&gt;</span><br><span class="line">	购买iPhone：</span><br><span class="line">	&lt;option&gt;iPhone 12 mini&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;option&gt;iPhone 12&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;option&gt;iPhone 12 Pro&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;option&gt;iPhone 12 ProMax&lt;&#x2F;option&gt;</span><br><span class="line">&lt;&#x2F;select&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>

<h4 id="文本域-textarea"><a href="#文本域-textarea" class="headerlink" title="文本域(textarea)"></a>文本域(textarea)</h4><p><textarea cols="30" row="30">请在这里填写个人信息</textarea></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;textarea cols&#x3D;&quot;30&quot; row&#x3D;&quot;30&quot;&gt;请在这里填写个人信息&lt;&#x2F;textarea&gt;</span><br></pre></td></tr></table></figure>
<h4 id="按钮-botton"><a href="#按钮-botton" class="headerlink" title="按钮(botton)"></a>按钮(botton)</h4><form>
<input type="button" value="按钮">
<input type="submit" value="提交">
</form>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form&gt;</span><br><span class="line">&lt;input type&#x3D;&quot;button&quot; value&#x3D;&quot;按钮&quot;&gt;</span><br><span class="line">&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;提交&quot;&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
<h4 id="PHP和表单的交互"><a href="#PHP和表单的交互" class="headerlink" title="PHP和表单的交互"></a>PHP和表单的交互</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">	&lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;表单与PHP交互&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form action&#x3D;&quot;PHP的地址&quot; method&#x3D;&quot;post&quot;&gt;</span><br><span class="line">		用户名:&lt;input type&#x3D;&quot;text&quot; name&#x3D;&quot;name&quot;&gt;</span><br><span class="line">		密 码:&lt;input type&#x3D;&quot;password&quot; name&#x3D;&quot;password&quot;&gt;</span><br><span class="line">		&lt;br&#x2F;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;submit&quot; value&#x3D;&quot;提交&quot;&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;  </span><br></pre></td></tr></table></figure>
<figure class="highlight php"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line"><span class="keyword">echo</span><span class="string">&quot;用户名：&quot;</span>.<span class="variable">$_POST</span>[<span class="string">&#x27;name&#x27;</span>].<span class="string">&quot;&lt;br&gt;密码：&quot;</span>.<span class="variable">$_POST</span>[<span class="string">&#x27;password&#x27;</span>];</span><br></pre></td></tr></table></figure>
<h3 id="HTML5框架"><a href="#HTML5框架" class="headerlink" title="HTML5框架"></a>HTML5框架</h3><h4 id="框架标签frame"><a href="#框架标签frame" class="headerlink" title="框架标签frame"></a>框架标签frame</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">	&lt;mata charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body bgcolor&#x3D;&quot;red&quot;&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">	&lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;框架&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">	&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;www.baidu.com&quot; taget&#x3D;&quot;top&quot;&gt;百度一下&lt;&#x2F;a&gt;</span><br><span class="line">	&lt;iframe src&#x3D;&quot;framea.html&quot; frameboder&#x3D;&quot;0&quot; width&#x3D;&quot;400px&quot; height&#x3D;&quot;400px&quot;&gt;</span><br><span class="line">	&lt;&#x2F;iframe&gt;	</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="target"><a href="#target" class="headerlink" title="target"></a>target</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">_self    在当前窗口打开链接，默认方式</span><br><span class="line">_black   在新的窗口打开链接</span><br><span class="line">_top     在顶层框架中打开链接</span><br><span class="line">_parent  在当前框架的上一层打开链接</span><br></pre></td></tr></table></figure>
<h3 id="HTML背景"><a href="#HTML背景" class="headerlink" title="HTML背景"></a>HTML背景</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body bgcolor&#x3D;&quot;red&quot;&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body background&#x3D;&quot;xxx.jpg&quot;&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>背景标签：Background</li>
<li>背景颜色：BGcolor</li>
</ul>
<h3 id="HTML的实体"><a href="#HTML的实体" class="headerlink" title="HTML的实体"></a>HTML的实体</h3><p>用来表示特殊字符，需要的时候百度</p>
<h3 id="XHTML"><a href="#XHTML" class="headerlink" title="XHTML"></a>XHTML</h3><ul>
<li>XHTML元素必须正确嵌套</li>
<li>XHTML元素必须始终关闭</li>
<li>XHTML元素必须小写</li>
<li>XHTML文档必须有一个根元素</li>
<li>XHTML属性必须小写</li>
<li>XHTML属性值必须用引号包围</li>
<li>XHTML属性最小化也是禁止的</li>
</ul>
<h3 id="contenteditable属性"><a href="#contenteditable属性" class="headerlink" title="contenteditable属性"></a>contenteditable属性</h3><body>
    <h2>可编辑列表</h2>
    <ul contenteditable="true">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;h2&gt;可编辑列表&lt;&#x2F;h2&gt;</span><br><span class="line">	&lt;ul contenteditable&#x3D;&quot;true&quot;&gt;</span><br><span class="line">		&lt;li&gt;列表1&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;li&gt;列表2&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;li&gt;列表3&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;&#x2F;ul&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="hidden属性"><a href="#hidden属性" class="headerlink" title="hidden属性"></a>hidden属性</h3><body>
    <h2>可编辑列表</h2>
    <ul hidden="true">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;h2&gt;可编辑列表&lt;&#x2F;h2&gt;</span><br><span class="line">	&lt;ul hidden&#x3D;&quot;true&quot;&gt;</span><br><span class="line">		&lt;li&gt;列表1&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;li&gt;列表2&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;li&gt;列表3&lt;&#x2F;li&gt;</span><br><span class="line">	&lt;&#x2F;ul&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<p>hidden属性是bool类型，true的时候会通过属性隐藏</p>
<h3 id="spellcheck属性"><a href="#spellcheck属性" class="headerlink" title="spellcheck属性"></a>spellcheck属性</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">&lt;iput type&#x3D;&quot;text&quot; spellcheck&#x3D;&quot;true&quot;&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<p>spellcheck是拼写检查</p>
<h3 id="tabindex属性"><a href="#tabindex属性" class="headerlink" title="tabindex属性"></a>tabindex属性</h3><p>通过按tab键来获取焦点</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;a href&#x3D;&quot;#&quot; tabindex&#x3D;&quot;1&quot;&gt;hello&lt;&#x2F;a&gt;</span><br><span class="line">	&lt;a href&#x3D;&quot;#&quot; tabindex&#x3D;&quot;3&quot;&gt;hello&lt;&#x2F;a&gt;</span><br><span class="line">	&lt;a href&#x3D;&quot;#&quot; tabindex&#x3D;&quot;2&quot;&gt;hello&lt;&#x2F;a&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<p>可以调整为-1来不获取焦点，但是有tabindex属性</p>
<h3 id="article元素"><a href="#article元素" class="headerlink" title="article元素"></a>article元素</h3><p><code>&lt;article&gt;</code>标签用于描述独立的内容部分</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;article&gt;</span><br><span class="line">		&lt;header&gt;</span><br><span class="line">			&lt;h1&gt;这是一个标题&lt;&#x2F;h1&gt;</span><br><span class="line">			&lt;p&gt;hello,你好&lt;&#x2F;p&gt;</span><br><span class="line">		&lt;&#x2F;header&gt;</span><br><span class="line">		&lt;footer&gt;</span><br><span class="line">			&lt;p&gt;这是一个底部&lt;&#x2F;p&gt;</span><br><span class="line">		&lt;&#x2F;footer&gt;</span><br><span class="line">	&lt;&#x2F;article&gt;</span><br><span class="line">&lt;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="section元素"><a href="#section元素" class="headerlink" title="section元素"></a>section元素</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;article&gt;</span><br><span class="line">	&lt;h1&gt;苹果&lt;&#x2F;h1&gt;</span><br><span class="line">	&lt;p&gt;这是一个水果&lt;&#x2F;p&gt;</span><br><span class="line">&lt;section&gt;</span><br><span class="line">	&lt;h2&gt;红富士&lt;&#x2F;h2&gt;</span><br><span class="line">	&lt;p&gt;这是一个红苹果&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;section&gt;</span><br><span class="line">&lt;section&gt;</span><br><span class="line">	&lt;h2&gt;apple&lt;&#x2F;h2&gt;</span><br><span class="line">	&lt;p&gt;这是个科技公司&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;section&gt;</span><br><span class="line">&lt;&#x2F;article&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>不要将section作为设置样式的界面容器（那是div的工作）</li>
<li>article是特殊的section</li>
<li>section一般需要标题</li>
</ul>
<h3 id="nav元素"><a href="#nav元素" class="headerlink" title="nav元素"></a>nav元素</h3><p>nav元素是一个可以用作页面导航的连接组，其中的导航元素连接到其他页面或当前页面的其他部分</p>
<p>nav元素的应用场景</p>
<ul>
<li>传统导航条</li>
<li>侧边栏导航</li>
<li>页内导航</li>
<li>翻页操作</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;nav&gt;</span><br><span class="line">		&lt;ul&gt;</span><br><span class="line">			&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;主页&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;</span><br><span class="line">			&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;开发文档&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;&#x2F;ul&gt;</span><br><span class="line">	&lt;&#x2F;nav&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="aside元素"><a href="#aside元素" class="headerlink" title="aside元素"></a>aside元素</h3><p>aside元素用来表示当前页面或文章的附属信息部分，他可以包括与当前页面或主要内容相关的引用</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">&lt;header&gt;</span><br><span class="line">	&lt;h1&gt;js&lt;h1&gt;</span><br><span class="line">&lt;&#x2F;header&gt;</span><br><span class="line">&lt;article&gt;</span><br><span class="line">	&lt;h1&gt;语法&lt;&#x2F;h1&gt;</span><br><span class="line">	&lt;p&gt;文章的正文部分&lt;&#x2F;p&gt;</span><br><span class="line">	&lt;aside&gt;</span><br><span class="line">		&lt;h1&gt;名词解释&lt;&#x2F;h1&gt;</span><br><span class="line">		&lt;p&gt;语法：就是js中很重要的一部分&lt;&#x2F;p&gt;</span><br><span class="line">	&lt;&#x2F;aside&gt;</span><br><span class="line">&lt;&#x2F;article&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="time元素和微格式"><a href="#time元素和微格式" class="headerlink" title="time元素和微格式"></a>time元素和微格式</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;time datetime&#x3D;&quot;2020-11-11&quot;&gt;2020-11-11&lt;&#x2F;time&gt;</span><br><span class="line">	&lt;time datetime&#x3D;&quot;2020-11-11T20:00&quot;&gt;2020-11-11&lt;&#x2F;time&gt;   T表示分隔符</span><br><span class="line">	&lt;time datetime&#x3D;&quot;2020-11-11T20:00z&quot;&gt;2020-11-11&lt;&#x2F;time&gt;  z表示标准时间</span><br><span class="line">	&lt;time datetime&#x3D;&quot;2020-11-11T20:00+9:00&quot;&gt;2020-11-11&lt;&#x2F;time&gt; 表示时差</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<p>微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义</p>
<h3 id="pubdate属性"><a href="#pubdate属性" class="headerlink" title="pubdate属性"></a>pubdate属性</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;article&gt;</span><br><span class="line">		&lt;header&gt;</span><br><span class="line">			&lt;h1&gt;苹果&lt;&#x2F;h1&gt;</span><br><span class="line">			&lt;time datetime&#x3D;&quot;2020-11-11&quot; pubdate&#x3D;&quot;true&quot;&gt;2020-11-11&lt;&#x2F;time&gt;</span><br><span class="line">		&lt;&#x2F;header&gt;</span><br><span class="line">	&lt;&#x2F;article&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<p>确定一个发布日期的作用</p>
<h3 id="header元素"><a href="#header元素" class="headerlink" title="header元素"></a>header元素</h3><p>header元素是一种具有引导和导航作用的结构元素，通常用来的放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;header&gt;</span><br><span class="line">		&lt;h1&gt;页面标题&lt;&#x2F;h1&gt;</span><br><span class="line">	&lt;&#x2F;header&gt;</span><br><span class="line">	&lt;article&gt;</span><br><span class="line">		&lt;header&gt;</span><br><span class="line">		&lt;h1&gt;Hello&lt;&#x2F;h1&gt;</span><br><span class="line">		&lt;&#x2F;header&gt;</span><br><span class="line">	&lt;&#x2F;article&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="footer元素"><a href="#footer元素" class="headerlink" title="footer元素"></a>footer元素</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;footer&gt;</span><br><span class="line">		&lt;ul&gt;</span><br><span class="line">			&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;版权信息&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;</span><br><span class="line">			&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;站点地图&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;</span><br><span class="line">			&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;联系方式&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;</span><br><span class="line">		&lt;&#x2F;ul&gt;</span><br><span class="line">	&lt;&#x2F;footer&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="hgroup元素"><a href="#hgroup元素" class="headerlink" title="hgroup元素"></a>hgroup元素</h3><p>hgroup元素是将标题及其子标题进行分组的元素。hgroup元素经常会将h1～h6元素进行分组，譬如一个内容区块的标题及其子元素算一组</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;hgroup&gt;</span><br><span class="line">		&lt;h1&gt;这是文章标题&lt;&#x2F;h1&gt;</span><br><span class="line">		&lt;h2&gt;这是文章的子标题&lt;&#x2F;h2&gt;</span><br><span class="line">	&lt;&#x2F;hgroup&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="address元素"><a href="#address元素" class="headerlink" title="address元素"></a>address元素</h3><p>address元素用来在文档中呈现联系信息，包括文档作者的名字，他们的网站链接、电子邮箱、真实地址、电话号码等。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;address&gt;</span><br><span class="line">	&lt;a href&#x3D;&quot;#&quot;&gt;Lawted&lt;&#x2F;a&gt;</span><br><span class="line">	&lt;time datetime&#x3D;&quot;2020-11-11&quot;&gt;2020-11-11&lt;&#x2F;time&gt;</span><br><span class="line">&lt;&#x2F;address&gt;</span><br></pre></td></tr></table></figure>
<h3 id="网页编排规则"><a href="#网页编排规则" class="headerlink" title="网页编排规则"></a>网页编排规则</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;header&gt;</span><br><span class="line">		&lt;h1&gt;网页标题&lt;&#x2F;h1&gt;</span><br><span class="line">		&lt;nav&gt;</span><br><span class="line">			&lt;ul&gt;</span><br><span class="line">				&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;首页&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;</span><br><span class="line">				&lt;li&gt;&lt;a href&#x3D;&quot;#&quot;&gt;帮助&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;</span><br><span class="line">			&lt;&#x2F;ul&gt;</span><br><span class="line">		&lt;&#x2F;nav&gt;</span><br><span class="line">	&lt;&#x2F;header&gt;</span><br><span class="line">	&lt;article&gt;</span><br><span class="line">		&lt;hgroup&gt;</span><br><span class="line">			&lt;h1&gt;文章主标题&lt;&#x2F;h1&gt;</span><br><span class="line">			&lt;h2&gt;文章子标题&lt;&#x2F;h2&gt;</span><br><span class="line">		&lt;&#x2F;hgroup&gt;</span><br><span class="line">		&lt;p&gt;文章正文&lt;&#x2F;p&gt;</span><br><span class="line">	&lt;section&gt;</span><br><span class="line">		&lt;div&gt;</span><br><span class="line">			&lt;article&gt;		</span><br><span class="line">				&lt;h1&gt;评论标题&lt;&#x2F;h1&gt;</span><br><span class="line">				&lt;p&gt;评论正文&lt;&#x2F;p&gt;</span><br><span class="line">			&lt;&#x2F;article&gt;</span><br><span class="line">		&lt;&#x2F;div&gt;</span><br><span class="line">	&lt;&#x2F;section&gt;</span><br><span class="line">	&lt;&#x2F;article&gt;</span><br><span class="line">	&lt;footer&gt;</span><br><span class="line">		&lt;small&gt;版权所有：&lt;&#x2F;small&gt;</span><br><span class="line">	&lt;&#x2F;footer&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="表单内元素的form属性"><a href="#表单内元素的form属性" class="headerlink" title="表单内元素的form属性"></a>表单内元素的form属性</h3><p>HTML5中，可以吧内部从属元素写在页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属的指定表单了</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form id&#x3D;&quot;testform&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">	&lt;textarea form&#x3D;&quot;testform&quot;&gt;&lt;&#x2F;textarea&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="表单内元素的formaction属性"><a href="#表单内元素的formaction属性" class="headerlink" title="表单内元素的formaction属性"></a>表单内元素的formaction属性</h3><p>HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form id&#x3D;&quot;1&quot;&gt;</span><br><span class="line">	&lt;input type&#x3D;&quot;submit&quot; name&#x3D;&quot;s1&quot; value&#x3D;&quot;v1&quot; foraction&#x3D;&quot;xx.jsp&quot;&gt;提交到xxx</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
<h3 id="表单内元素的formmethod属性"><a href="#表单内元素的formmethod属性" class="headerlink" title="表单内元素的formmethod属性"></a>表单内元素的formmethod属性</h3><p>HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方式</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form id&#x3D;&quot;testform&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;submit&quot; name&#x3D;&quot;s1&quot; formmethod&#x3D;&quot;post&quot;&gt;提交</span><br><span class="line">		&lt;input type&#x3D;&quot;submit&quot; name&#x3D;&quot;s2&quot; formmethod&#x3D;&quot;get&quot;&gt;提交</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="表单内元素的formenctype属性"><a href="#表单内元素的formenctype属性" class="headerlink" title="表单内元素的formenctype属性"></a>表单内元素的formenctype属性</h3><p>在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; formenctype&#x3D;&quot;text&#x2F;plain&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; formenctype&#x3D;&quot;multipart&#x2F;form-data&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; formenctype&#x3D;&quot;application&#x2F;x-www-form-urlencoded&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="表单内元素的formtarget属性"><a href="#表单内元素的formtarget属性" class="headerlink" title="表单内元素的formtarget属性"></a>表单内元素的formtarget属性</h3><p>在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需的页面</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; formtarget&#x3D;&quot;_blank&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; formtarget&#x3D;&quot;_self&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; formtarget&#x3D;&quot;_parent&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; formtarget&#x3D;&quot;_top&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; formtarget&#x3D;&quot;framename&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="autofocus"><a href="#autofocus" class="headerlink" title="autofocus"></a>autofocus</h3><p>为文本框、选择框或者按钮控件加上autofocus属性，当画面打开时，该空间自动获得光标焦点</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot;&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; autofocus&gt;   第二个会有光标焦点</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="表单内元素的required属性"><a href="#表单内元素的required属性" class="headerlink" title="表单内元素的required属性"></a>表单内元素的required属性</h3><p>HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素为空白则不允许提交，同时显示提示文字</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">		&lt;input type&#x3D;&quot;text&quot; required&#x3D;&quot;required&quot;&gt;</span><br><span class="line">		&lt;botton type&#x3D;&quot;submit&quot;&gt;提交 &lt;&#x2F;botton&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="表单内元素的labels属性"><a href="#表单内元素的labels属性" class="headerlink" title="表单内元素的labels属性"></a>表单内元素的labels属性</h3><p>在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form id&#x3D;&quot;testform&quot;&gt;</span><br><span class="line">		&lt;label id&#x3D;&quot;label&quot; for&#x3D;&quot;txt_name&quot;&gt;姓名：&lt;&#x2F;label&gt;</span><br><span class="line">		&lt;input id&#x3D;&quot;&quot;&gt;</span><br><span class="line">		等学了js再来补充		</span><br></pre></td></tr></table></figure>
<h3 id="标签的control属性"><a href="#标签的control属性" class="headerlink" title="标签的control属性"></a>标签的control属性</h3><p>HTML5中，可以在标签内部防止一个表单元素，并且通过该标签的control属性来访问该表单元素</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">		&lt;label id&#x3D;&quot;label&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
<h3 id="文本框的placeholder属性"><a href="#文本框的placeholder属性" class="headerlink" title="文本框的placeholder属性"></a>文本框的placeholder属性</h3><p>placeholder是指文本框处于未输入状态的时候显示的输入提示</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;input type&#x3D;&quot;text&quot; placeholder&#x3D;&quot;请输入用户名&quot;&gt;</span><br></pre></td></tr></table></figure>
<h3 id="文本框的list属性"><a href="#文本框的list属性" class="headerlink" title="文本框的list属性"></a>文本框的list属性</h3><p>在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。】该元素类似于选择框，但是当用户香要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form&gt;</span><br><span class="line">	&lt;input type&#x3D;&quot;text&quot; list&#x3D;&quot;greetings&quot;&gt;</span><br><span class="line">	&lt;datalist id&#x3D;&quot;greetings&quot; &gt;</span><br><span class="line">	&lt;option value&#x3D;&quot;HTML5&quot;&gt;&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;option value&#x3D;&quot;CSS&quot;&gt;&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;option value&#x3D;&quot;ios&quot;&gt;&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;&#x2F;datalist&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
<h3 id="文本框的autocomplete属性"><a href="#文本框的autocomplete属性" class="headerlink" title="文本框的autocomplete属性"></a>文本框的autocomplete属性</h3><p>帮助输入自动完成的功能</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;form&gt;</span><br><span class="line">	&lt;input type&#x3D;&quot;text&quot; autocomplete&#x3D;&quot;on&quot; list&#x3D;&quot;greetings&quot;&gt;</span><br><span class="line">	&lt;datalist id&#x3D;&quot;greetings&quot; &gt;</span><br><span class="line">	&lt;option value&#x3D;&quot;HTML5&quot;&gt;&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;option value&#x3D;&quot;CSS&quot;&gt;&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;option value&#x3D;&quot;ios&quot;&gt;&lt;&#x2F;option&gt;</span><br><span class="line">	&lt;&#x2F;datalist&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br></pre></td></tr></table></figure>
<h3 id="文本框的pattern属性"><a href="#文本框的pattern属性" class="headerlink" title="文本框的pattern属性"></a>文本框的pattern属性</h3><p>在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定的格式。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;input pattern&#x3D;&quot;[A-Z]&#123;3&#125;&quot; name&#x3D;&quot;part&quot;&gt;</span><br><span class="line">&lt;input type&#x3D;&quot;submit&quot;&gt;</span><br></pre></td></tr></table></figure>
<h3 id="文本框的SelectionDirection属性"><a href="#文本框的SelectionDirection属性" class="headerlink" title="文本框的SelectionDirection属性"></a>文本框的SelectionDirection属性</h3><p>用户在input和textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取的方向，forward和backward</p>
<h3 id="复选框的indeterminate属性"><a href="#复选框的indeterminate属性" class="headerlink" title="复选框的indeterminate属性"></a>复选框的indeterminate属性</h3><p>￼可以在js脚本代码中对该元素使用indeterminate属性，以说明复选框处于尚未明确是否选取的状态</p>
<h3 id="image提交按钮的height属性和width属性"><a href="#image提交按钮的height属性和width属性" class="headerlink" title="image提交按钮的height属性和width属性"></a>image提交按钮的height属性和width属性</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form&gt;</span><br><span class="line">	&lt;input type&#x3D;&quot;image&quot; src&#x3D;&quot;....&quot;  width&#x3D;&quot;50&quot; height&#x3D;&quot;50&quot;&gt;</span><br><span class="line">	&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/26/%E9%9A%8F%E7%AC%94/%E6%AC%A2%E8%BF%8E%E6%9D%A5%E5%88%B0lawted%E7%9A%84%E5%8D%9A%E5%AE%A2/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/26/%E9%9A%8F%E7%AC%94/%E6%AC%A2%E8%BF%8E%E6%9D%A5%E5%88%B0lawted%E7%9A%84%E5%8D%9A%E5%AE%A2/" class="post-title-link" itemprop="url">欢迎来到lawted的博客</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-26 12:58:39" itemprop="dateCreated datePublished" datetime="2021-01-26T12:58:39+08:00">2021-01-26</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-02-05 15:50:38" itemprop="dateModified" datetime="2021-02-05T15:50:38+08:00">2021-02-05</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/25/Vuex/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/25/Vuex/" class="post-title-link" itemprop="url">Vuex技术总结</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-25 12:58:39" itemprop="dateCreated datePublished" datetime="2021-01-25T12:58:39+08:00">2021-01-25</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-01-26 15:53:54" itemprop="dateModified" datetime="2021-01-26T15:53:54+08:00">2021-01-26</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="核心"><a href="#核心" class="headerlink" title="核心"></a>核心</h1><p><strong>为什么要用Vuex</strong></p>
<ul>
<li>如果要在子组件中使用祖先组件的数据，需要一层层传递很麻烦</li>
<li>兄弟组件之间不能直接传递数据，如果兄弟组件传递数据就需要父组件</li>
</ul>
<p><strong>Vuex 主要有四部分：</strong></p>
<ol>
<li>state：包含了<code>store</code>中存储的各个状态。</li>
<li>getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。</li>
<li>mutation: 一组方法，是改变<code>store</code>中状态的执行者，<strong>只能是同步操作</strong>。</li>
<li>action: 一组方法，其中可以<strong>包含异步操作</strong>。</li>
</ol>
<h2 id="Store"><a href="#Store" class="headerlink" title="Store"></a>Store</h2><h3 id="state"><a href="#state" class="headerlink" title="state"></a>state</h3><p>保存共享数据</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//Store.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  state: &#123;</span><br><span class="line">    msg:<span class="string">&quot;Vuex&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//main.js中使用注入store</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./Store&#x27;</span></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* eslint-disable no-new */</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  router,store,</span><br><span class="line">  components: &#123; App &#125;,</span><br><span class="line">  template: <span class="string">&#x27;&lt;App/&gt;&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//home组件是爸爸组件，里面有三个子组件phone,PC,Tablet</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;我是爸爸组件,我使用了&#123;&#123;<span class="built_in">this</span>.$store.state.msg&#125;&#125;&lt;/h1&gt;</span><br><span class="line">    &lt;phone&gt;&lt;/phone&gt;</span><br><span class="line">    &lt;PC&gt;&lt;/PC&gt;</span><br><span class="line">    &lt;Tablet&gt;&lt;/Tablet&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> PC <span class="keyword">from</span> <span class="string">&quot;./PC&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> Phone <span class="keyword">from</span> <span class="string">&quot;./Phone&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> Tablet <span class="keyword">from</span> <span class="string">&quot;./Tablet&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  data () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  components:&#123;</span><br><span class="line">    PC,Phone,Tablet</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>格式：<code>&#123;&#123;this.$store.state.msg&#125;&#125;</code></p>
<hr>
<h3 id="mutations"><a href="#mutations" class="headerlink" title="mutations"></a>mutations</h3><p>用于保存修改共享数据的方法，**<code>mutations</code>只能是同步地更改状态。**</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//store.js中</span></span><br><span class="line">mutations:&#123;</span><br><span class="line">    <span class="function"><span class="title">plus</span>(<span class="params">state</span>)</span>&#123;</span><br><span class="line">      state.count = state.count +<span class="number">1</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">sub</span>(<span class="params">state</span>)</span>&#123;</span><br><span class="line">      state.count = state.count -<span class="number">1</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//使用的地方，home.vue</span></span><br><span class="line">methods:&#123;</span><br><span class="line">  <span class="function"><span class="title">add</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;plus&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">min</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;sub&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="Payload"><a href="#Payload" class="headerlink" title="Payload"></a>Payload</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">mutations: &#123;</span><br><span class="line">  increment (state, n) &#123;</span><br><span class="line">    state.count +&#x3D; n</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">this</span>.$store.commit(<span class="string">&#x27;increment&#x27;</span>, <span class="number">10</span>)</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="getters"><a href="#getters" class="headerlink" title="getters"></a>getters</h3><p>和computed类似</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//store.js中</span></span><br><span class="line">getters:&#123;</span><br><span class="line">    <span class="function"><span class="title">format</span>(<span class="params">state</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> state.msg+<span class="string">&#x27;,我是谁&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>格式：<code>&#123;&#123;this.$store.getters.format&#125;&#125;</code></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">getters: &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  getTodoById: <span class="function">(<span class="params">state</span>) =&gt;</span> <span class="function">(<span class="params">id</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> state.todos.find(<span class="function"><span class="params">todo</span> =&gt;</span> todo.id === id)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">store.getters.getTodoById(<span class="number">2</span>) <span class="comment">// -&gt; &#123; id: 2, text: &#x27;...&#x27;, done: false &#125;</span></span><br></pre></td></tr></table></figure>
<hr>
<h3 id="action"><a href="#action" class="headerlink" title="action"></a>action</h3><p>想要<strong>异步地更改状态</strong>，就需要使用<code>action</code>。<code>action</code>并不直接改变<code>state</code>，而是发起<code>mutation</code>。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"> mutations: &#123;</span><br><span class="line">    increment (state) &#123;</span><br><span class="line">      state.count++</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  actions: &#123;</span><br><span class="line">    increment (context) &#123;<span class="comment">//名字要和mutations中一样</span></span><br><span class="line">      context.commit(<span class="string">&#x27;increment&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">or</span><br><span class="line">actions: &#123;</span><br><span class="line">  increment (&#123; commit &#125;) &#123;</span><br><span class="line">    commit(<span class="string">&#x27;increment&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//可以异步执行，mutations不行</span></span><br><span class="line">incrementAsync (&#123; commit &#125;) &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      commit(<span class="string">&#x27;increment&#x27;</span>)</span><br><span class="line">    &#125;, <span class="number">1000</span>)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h3 id="分发-action"><a href="#分发-action" class="headerlink" title="分发 action"></a>分发 action</h3><p>Action 通过 <code>store.dispatch</code> 方法触发：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">this.$store.dispatch(&#39;increment&#39;)</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="各个模块与-Vue-组件结合"><a href="#各个模块与-Vue-组件结合" class="headerlink" title="各个模块与 Vue 组件结合"></a>各个模块与 Vue 组件结合</h2><p>将<code>state</code>和<code>getter</code>结合进组件需要使用<strong>计算属性</strong>：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">computed:&#123;</span><br><span class="line">    <span class="function"><span class="title">msg</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.$store.state.msg</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">format</span>(<span class="params">state</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.$store.getters.format;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>但是还是很麻烦，因为computed里面东西很多</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">import &#123; mapState, mapGetters, mapMutations, mapActions &#125; from &#39;vuex&#39;</span><br><span class="line">computed: &#123;...mapState([&#39;count&#39;,&#39;msg&#39;]),...mapGetters([&#39;format&#39;])&#125;</span><br></pre></td></tr></table></figure>


<p>将<code>mutation</code>和<code>action</code>结合进组件需要在<code>methods</code>中调用<code>this.$store.commit()</code>或者<code>this.$store.commit()</code>:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    changeDate () &#123;</span><br><span class="line">        <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;change&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    changeDateAsync () &#123;</span><br><span class="line">        <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;changeAsync&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>但是还是很麻烦，因为methods里面东西很多</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line"> ...mapMutations([<span class="string">&#x27;addAge&#x27;</span>])</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//相当于</span></span><br><span class="line"><span class="function"><span class="title">addAge</span>(<span class="params">payLoad</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;addAge&#x27;</span>,payLoad)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">  ...mapActions([<span class="string">&#x27;getUserInfo&#x27;</span>])</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//相当于</span></span><br><span class="line"><span class="function"><span class="title">getUserInfo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">this</span>.$store.dispatch(‘getUserInfo’)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">methods:&#123;</span><br><span class="line">  ...mapActions(&#123;</span><br><span class="line">      add: <span class="string">&#x27;increment&#x27;</span> <span class="comment">// 将 `this.add()` 映射为 `this.$store.dispatch(&#x27;increment&#x27;)`</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<hr>
<h3 id="modules"><a href="#modules" class="headerlink" title="modules"></a>modules</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="keyword">import</span> comment <span class="keyword">from</span> <span class="string">&#x27;./comment&#x27;</span></span><br><span class="line"><span class="keyword">import</span> post <span class="keyword">from</span> <span class="string">&#x27;./post&#x27;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  modules: &#123;</span><br><span class="line">    comment,</span><br><span class="line">    post</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//post.js</span></span><br><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line">  all: []</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> mutations = &#123;</span><br><span class="line">  <span class="function"><span class="title">loadPosts</span>(<span class="params">state, posts</span>)</span> &#123;</span><br><span class="line">    state.all = posts</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> actions = &#123;</span><br><span class="line">  <span class="function"><span class="title">loadPosts</span>(<span class="params">&#123;commit&#125;</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> uri = <span class="string">&#x27;http://localhost:3008/posts&#x27;</span></span><br><span class="line">    axios.get(uri).then(</span><br><span class="line">      res =&gt; &#123;</span><br><span class="line">        <span class="keyword">const</span> posts = res.data</span><br><span class="line">        commit(<span class="string">&#x27;loadPosts&#x27;</span>, posts)</span><br><span class="line">      &#125;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  state, mutations, actions</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/25/vue%E6%96%87%E6%A1%A3%E6%80%BB%E7%BB%93/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/25/vue%E6%96%87%E6%A1%A3%E6%80%BB%E7%BB%93/" class="post-title-link" itemprop="url">Vue 文档总结</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-25 12:58:39" itemprop="dateCreated datePublished" datetime="2021-01-25T12:58:39+08:00">2021-01-25</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-01-26 14:40:24" itemprop="dateModified" datetime="2021-01-26T14:40:24+08:00">2021-01-26</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="监听和计算属性"><a href="#监听和计算属性" class="headerlink" title="监听和计算属性"></a>监听和计算属性</h1><h3 id="计算属性缓存-vs-方法"><a href="#计算属性缓存-vs-方法" class="headerlink" title="计算属性缓存 vs 方法"></a>计算属性缓存 vs 方法</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;methods</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#39;App&#39;,</span><br><span class="line">  data()&#123;</span><br><span class="line">    return&#123;</span><br><span class="line">      message:&quot;hello&quot;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    reversedMessage: function () &#123;</span><br><span class="line">      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;computed</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#39;App&#39;,</span><br><span class="line">  data()&#123;</span><br><span class="line">    return&#123;</span><br><span class="line">      message:&quot;hello&quot;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed: &#123;</span><br><span class="line">    reversedMessage: function () &#123;</span><br><span class="line">      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<p>两种方式的最终结果确实是完全相同的。然而，不同的是<strong>计算属性是基于它们的响应式依赖进行缓存的</strong>。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 <code>message</code> 还没有发生改变，多次访问 <code>reversedMessage</code> 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将<strong>总会</strong>再次执行函数。</p>
<h2 id="计算属性-vs-侦听属性"><a href="#计算属性-vs-侦听属性" class="headerlink" title="计算属性 vs 侦听属性"></a>计算属性 vs 侦听属性</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#39;App&#39;,</span><br><span class="line">  data()&#123;</span><br><span class="line">    return&#123;</span><br><span class="line">      firstName: &#39;Foo&#39;,</span><br><span class="line">      lastName: &#39;Bar&#39;,</span><br><span class="line">      fullName: &#39;Foo Bar&#39;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  watch: &#123;</span><br><span class="line">    firstName: function (val) &#123;</span><br><span class="line">      this.fullName &#x3D; val + &#39; &#39; + this.lastName</span><br><span class="line">    &#125;,</span><br><span class="line">    lastName: function (val) &#123;</span><br><span class="line">      this.fullName &#x3D; this.firstName + &#39; &#39; + val</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<p>重复写不好用！</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#39;App&#39;,</span><br><span class="line">  data()&#123;</span><br><span class="line">    return&#123;</span><br><span class="line">      firstName: &#39;Foo&#39;,</span><br><span class="line">      lastName: &#39;Bar&#39;,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed: &#123;</span><br><span class="line">    fullName: function () &#123;</span><br><span class="line">      return this.firstName + &#39; &#39; + this.lastName</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<p>简单！好用！</p>
<h2 id="侦听器"><a href="#侦听器" class="headerlink" title="侦听器"></a>侦听器</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">   <span class="comment">// 如果 `question` 发生改变，这个函数就会运行</span></span><br><span class="line">   question: <span class="function"><span class="keyword">function</span> (<span class="params">newQuestion, oldQuestion</span>) </span>&#123;</span><br><span class="line">     <span class="built_in">this</span>.answer = <span class="string">&#x27;Waiting for you to stop typing...&#x27;</span></span><br><span class="line">     <span class="built_in">this</span>.debouncedGetAnswer()</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<p> watch是侦听一个参数，当这个参数发生变化时影响其他数据的变化。并且可以获得该参数的新值和旧值进行相应的计算。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>通过以上叙述我们可以得知：</p>
<ul>
<li>watch适合处理的场景是，侦听一个数的变化，在数据变化的同时进行异步操作或者是比较大的开销（该数据影响别的多个数据）</li>
<li>computed适合处理的场景是，获得一个值或者结果，该结果受其他的依赖的影响。（一个数据受多个数据影响）</li>
<li>methods用的是也是最多的，一般的事件绑定，普通函数，请求数据方法都是在methods中处理。然后vue的生命周期函数就是在相应的或者合适的时机调用这些定义好的函数。</li>
</ul>
<h1 id="V-if-和-V-show"><a href="#V-if-和-V-show" class="headerlink" title="V-if 和 V-show"></a>V-if 和 V-show</h1><p> <code>v-if </code> 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。</p>
<p><code>v-if</code> 也是<strong>惰性的</strong>：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。</p>
<p>相比之下，<code>v-show</code> 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。</p>
<p>一般来说，<code>v-if</code> 有更高的切换开销，而 <code>v-show</code> 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 <code>v-show</code> 较好；如果在运行时条件很少改变，则使用 <code>v-if</code> 较好。</p>
<h1 id="prop属性"><a href="#prop属性" class="headerlink" title="prop属性"></a>prop属性</h1><h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;父组件</span><br><span class="line">&lt;template&gt;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">    &lt;Users :users&#x3D;&quot;users&quot;&gt;&lt;&#x2F;Users&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import Users from &#39;.&#x2F;components&#x2F;Users&#39;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#39;App&#39;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return&#123;</span><br><span class="line">      users: [</span><br><span class="line">        &#123;id:1, name:&#39;Henry&#39;&#125;,</span><br><span class="line">        &#123;id:2, name:&#39;Tom&#39;&#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    Users</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;子组件 Users.vue</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">    &lt;span&gt;通过import注册局部组件&lt;&#x2F;span&gt;&lt;br&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;users[0].name&#125;&#125;&lt;&#x2F;span&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;Users&quot;,</span><br><span class="line">  props:[&#39;users&#39;]</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>


<h2 id="prop类型"><a href="#prop类型" class="headerlink" title="prop类型"></a>prop类型</h2><ul>
<li>以字符串数组形式列出的 prop：</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">props: [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;likes&#x27;</span>, <span class="string">&#x27;isPublished&#x27;</span>, <span class="string">&#x27;commentIds&#x27;</span>, <span class="string">&#x27;author&#x27;</span>]</span><br></pre></td></tr></table></figure>


<ul>
<li>以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">props: &#123;</span><br><span class="line">  title: <span class="built_in">String</span>,</span><br><span class="line">  likes: <span class="built_in">Number</span>,</span><br><span class="line">  isPublished: <span class="built_in">Boolean</span>,</span><br><span class="line">  commentIds: <span class="built_in">Array</span>,</span><br><span class="line">  author: <span class="built_in">Object</span>,</span><br><span class="line">  callback: <span class="built_in">Function</span>,</span><br><span class="line">  contactsPromise: <span class="built_in">Promise</span> <span class="comment">// or any other constructor</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="传递静态或动态-Prop"><a href="#传递静态或动态-Prop" class="headerlink" title="传递静态或动态 Prop"></a>传递静态或动态 Prop</h2><p>使用v-bind给静态赋值</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;blog-post title&#x3D;&quot;My journey with Vue&quot;&gt;&lt;&#x2F;blog-post&gt;</span><br></pre></td></tr></table></figure>


<p>使用v-bind给动态赋值</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!-- 动态赋予一个变量的值 --&gt;</span><br><span class="line">&lt;blog-post v-bind:title&#x3D;&quot;post.title&quot;&gt;&lt;&#x2F;blog-post&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 动态赋予一个复杂表达式的值 --&gt;</span><br><span class="line">&lt;blog-post</span><br><span class="line">  v-bind:title&#x3D;&quot;post.title + &#39; by &#39; + post.author.name&quot;</span><br><span class="line">&gt;&lt;&#x2F;blog-post&gt;</span><br></pre></td></tr></table></figure>
<h2 id="传入一个对象的所有-property"><a href="#传入一个对象的所有-property" class="headerlink" title="传入一个对象的所有 property"></a>传入一个对象的所有 property</h2><p>如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 <code>v-bind</code> (取代 <code>v-bind:prop-name</code>)。例如，对于一个给定的对象 <code>post</code>：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">post: &#123;</span><br><span class="line">  id: 1,</span><br><span class="line">  title: &#39;My Journey with Vue&#39;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;blog-post v-bind&#x3D;&quot;post&quot;&gt;&lt;&#x2F;blog-post&gt;</span><br></pre></td></tr></table></figure>
<h1 id="动态组件"><a href="#动态组件" class="headerlink" title="动态组件"></a>动态组件</h1><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;&#x2F;使用了hello和submitButton两个组件，并current中切换</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">  &lt;component :is&#x3D;&quot;current&quot;&gt;&lt;&#x2F;component&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import submitButton from &quot;.&#x2F;components&#x2F;submitButton&quot;;</span><br><span class="line">import hello from &quot;.&#x2F;components&#x2F;Hello&quot;</span><br><span class="line">export default &#123;</span><br><span class="line">  data()&#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      current:&quot;submitButton&quot;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br><span class="line">  components:&#123;</span><br><span class="line">    submitButton,</span><br><span class="line">    hello</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="keep-alive"><a href="#keep-alive" class="headerlink" title="keep-alive"></a>keep-alive</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;keep-alive&gt;</span><br><span class="line">  &lt;component v-bind:is&#x3D;&quot;currentTabComponent&quot;&gt;&lt;&#x2F;component&gt;</span><br><span class="line">&lt;&#x2F;keep-alive&gt;</span><br></pre></td></tr></table></figure>
<p>在组件之间切换的时候，keep-alive保持这些组件的状态，以避免反复重渲染导致的性能问题</p>
<h2 id="异步组件"><a href="#异步组件" class="headerlink" title="异步组件"></a>异步组件</h2><h1 id="过滤器"><a href="#过滤器" class="headerlink" title="过滤器"></a>过滤器</h1><h2 id="全局过滤器"><a href="#全局过滤器" class="headerlink" title="全局过滤器"></a>全局过滤器</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Vue.filter(&#39;globalFilter&#39;, function (value) &#123;</span><br><span class="line"></span><br><span class="line">  return value + &quot;!!!&quot;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="组件过滤器"><a href="#组件过滤器" class="headerlink" title="组件过滤器"></a>组件过滤器</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">filters:&#123;</span><br><span class="line"></span><br><span class="line">    componentFilter:function(value)&#123;</span><br><span class="line"></span><br><span class="line">          return value + &quot;!!!&quot;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<p><strong>全局注册时是filter，没有s的。而组件过滤器是filters</strong></p>
<h2 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h2><ul>
<li>在双花括号插值</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;&#123; &#39;ok&#39; | globalFilter &#125;&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>在v-bind表达式中使用</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;div v-bind:data&#x3D;&quot;&#39;ok&#39; | globalFilter&quot; &gt;&lt;&#x2F;div&gt;</span><br></pre></td></tr></table></figure>


<p>过滤器可以串联：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;&#123; message | filterA | filterB &#125;&#125;</span><br></pre></td></tr></table></figure>
<p>message是作为参数传给<code>filterA </code>函数，而<code>filterA</code> 函数的返回值作为参数传给<code>filterB</code>函数，最终结果显示是由<code>filterB</code>返回的。</p>
<p>过滤器是 JavaScript 函数，因此可以接收参数：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;&#123; message | filterA(&#39;arg1&#39;, arg2) &#125;&#125;</span><br></pre></td></tr></table></figure>
<p>这里，<code>filterA</code> 被定义为接收三个参数的过滤器函数。其中 <code>message</code> 的值作为第一个参数，普通字符串 <code>&#39;arg1&#39;</code> 作为第二个参数，表达式 <code>arg2</code> 的值作为第三个参数。</p>
<h1 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h1><p><strong>核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法</strong></p>
<p>（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为  obj （要定义其上属性的对象）     prop （要定义或修改的属性）   descriptor （具体的改变方法）<br> （2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">var obj&#x3D;&#123; &#125;;</span><br><span class="line">Object.defineProperty(obj,&#39;hello&#39;,&#123;</span><br><span class="line">	get:function()&#123;</span><br><span class="line">		console.log(&#39;调用了get的方法&#39;);</span><br><span class="line">	&#125;,</span><br><span class="line">	set:function(newVal)&#123;</span><br><span class="line">		console.log(&#39;调用了set的方法,方法的值是&#39;+newVal)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">obj.hello;&#x2F;&#x2F;调用了get方法</span><br><span class="line">obj.hello &#x3D; &#39;hi&#39;;&#x2F;&#x2F;调用了set的方法，方法的值是hi</span><br></pre></td></tr></table></figure>
<p>如果没有参数就返回值，如果有参数就调用set，重新设定值</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">	&lt;input type&#x3D;&quot;text&quot; id&#x3D;&quot;a&quot;&gt;</span><br><span class="line">	&lt;span id&#x3D;&quot;b&quot;&gt;&lt;&#x2F;span&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    var obj &#x3D; &#123;&#125;;  &#x2F;&#x2F;定义一个空对象</span><br><span class="line"></span><br><span class="line">    var val &#x3D; &#39;hello&#39;;  &#x2F;&#x2F;赋予初始值</span><br><span class="line"></span><br><span class="line">    Object.defineProperty(obj, &#39;val&#39;, &#123;&#x2F;&#x2F;定义要修改对象的属性</span><br><span class="line"></span><br><span class="line">        get: function () &#123;</span><br><span class="line"></span><br><span class="line">            return val;</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        set: function (newVal) &#123; </span><br><span class="line"></span><br><span class="line">             val &#x3D; newVal;&#x2F;&#x2F;定义val等于修改后的内容</span><br><span class="line"></span><br><span class="line">            document.getElementById(&#39;a&#39;).value &#x3D; val;&#x2F;&#x2F;让文本框的内容等于val</span><br><span class="line">            </span><br><span class="line">            document.getElementById(&#39;b&#39;).innerHTML &#x3D; val;&#x2F;&#x2F;让span的内容等于val</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125;);</span><br><span class="line">    document.addEventListener(&#39;keyup&#39;, function (e) &#123;&#x2F;&#x2F;当在文本框输入内容时让对象里你定义的val等于文本框的值</span><br><span class="line"></span><br><span class="line">        obj.val &#x3D; e.target.value;</span><br><span class="line"></span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<p><strong>通过添加事件监听keyup来触发set方法，而set再修改了访问器属性的同时，也修改了dom样式，改变了span标签内的文本。</strong></p>
<hr>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/25/Node.js/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/25/Node.js/" class="post-title-link" itemprop="url">Node.js技术总结</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-25 12:58:39" itemprop="dateCreated datePublished" datetime="2021-01-25T12:58:39+08:00">2021-01-25</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-02-02 10:34:26" itemprop="dateModified" datetime="2021-02-02T10:34:26+08:00">2021-02-02</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="Node-js"><a href="#Node-js" class="headerlink" title="Node.js"></a>Node.js</h1><h3 id="Url-parse"><a href="#Url-parse" class="headerlink" title="Url.parse( )"></a>Url.parse( )</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> url=<span class="built_in">require</span>(<span class="string">&#x27;url&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> api=<span class="string">&#x27;http://www.itying.com?name=zhangsan&amp;age=20&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> getValue=url.parse(api,<span class="literal">true</span>).query;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`姓名:<span class="subst">$&#123;getValue.name&#125;</span>--年龄:<span class="subst">$&#123;getValue.age&#125;</span>`</span>);</span><br></pre></td></tr></table></figure>
<h3 id="Node-js模块"><a href="#Node-js模块" class="headerlink" title="Node.js模块"></a>Node.js模块</h3><ul>
<li>exports</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//tools.js</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">formatApi</span>(<span class="params">api</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;http://www.itying.com/&quot;</span>+api;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">exports</span>.formatApi=formatApi;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> tools=<span class="built_in">require</span>(<span class="string">&#x27;./module/tools.js&#x27;</span>);</span><br><span class="line"></span><br><span class="line">http.createServer(<span class="function"><span class="keyword">function</span> (<span class="params">request, response</span>) </span>&#123;</span><br><span class="line">  response.writeHead(<span class="number">200</span>, &#123;<span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;text/html&#x27;</span>&#125;);</span><br><span class="line">  response.write(<span class="string">&quot;&lt;head&gt;&lt;meta charset=&#x27;UTF-8&#x27;&gt;&lt;/head&gt;&quot;</span>)</span><br><span class="line">  <span class="keyword">var</span> api=tools.formatApi(<span class="string">&#x27;api/plist&#x27;</span>);<span class="comment">//在方法前面加上文件的名字.</span></span><br><span class="line">  response.write(api);</span><br><span class="line">  response.end();</span><br><span class="line">&#125;).listen(<span class="number">8081</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;Server running at http://127.0.0.1:8081/&#x27;</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>module.exports</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//r1equest.js</span></span><br><span class="line"><span class="keyword">var</span> obj=&#123;</span><br><span class="line">  get:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;从服务器获取数据&#x27;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  post:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;提交数据&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports=obj;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> request=<span class="built_in">require</span>(<span class="string">&#x27;./module/request&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(request);</span><br></pre></td></tr></table></figure>
<p>如果在node_modules 文件夹下，路径可以直接写文件名</p>
<p><strong>使用npm init –yes生成package.json</strong></p>
<h2 id="npm-命令详解"><a href="#npm-命令详解" class="headerlink" title="npm 命令详解"></a>npm 命令详解</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm -v   					查看npm版本</span><br><span class="line">npm install Module_Name 	安装模块</span><br><span class="line">npm uninstall Module_Name 	卸载模块</span><br><span class="line">npm list 					查看当前目录下已安装的node包</span><br><span class="line">npm info Module_Name 		查看模块的版本</span><br><span class="line">npm install Module_Name@1.80安装指定版本的模块</span><br></pre></td></tr></table></figure>


<h2 id="fs模块"><a href="#fs模块" class="headerlink" title="fs模块"></a>fs模块</h2><h3 id="fs-stat检测是目录还是文件"><a href="#fs-stat检测是目录还是文件" class="headerlink" title="fs.stat检测是目录还是文件"></a>fs.stat检测是目录还是文件</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.stat(<span class="string">&#x27;./app.js&#x27;</span>,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`是文件:<span class="subst">$&#123;data.isFile()&#125;</span>`</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`是目录:<span class="subst">$&#123;data.isDirectory()&#125;</span>`</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-mkdir创建目录"><a href="#fs-mkdir创建目录" class="headerlink" title="fs.mkdir创建目录"></a>fs.mkdir创建目录</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.mkdir(<span class="string">&#x27;./css&#x27;</span>,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;创建成功&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-writeFile创建文件"><a href="#fs-writeFile创建文件" class="headerlink" title="fs.writeFile创建文件"></a>fs.writeFile创建文件</h3><p><strong>如果已经有会覆盖重写</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.writeFile(<span class="string">&#x27;./html5/index.html&#x27;</span>,<span class="string">&#x27;你好node.js&#x27;</span>,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;创建成功&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-appendFile追加文件"><a href="#fs-appendFile追加文件" class="headerlink" title="fs.appendFile追加文件"></a>fs.appendFile追加文件</h3><p><strong>如果没有会创建，如果有会追加</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.appendFile(<span class="string">&#x27;./css/base.css&#x27;</span>,<span class="string">&#x27;body&#123;color:red&#125;&#x27;</span>,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;appendFile 成功&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-readFile读取文件"><a href="#fs-readFile读取文件" class="headerlink" title="fs.readFile读取文件"></a>fs.readFile读取文件</h3><p>默认是buffer文件，需要转换为string</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.readFile(<span class="string">&#x27;./html5/index.html&#x27;</span>,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(data);<span class="comment">//这是一个buffer文件</span></span><br><span class="line">  <span class="built_in">console</span>.log(data.toString());</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-readdir读取目录"><a href="#fs-readdir读取目录" class="headerlink" title="fs.readdir读取目录"></a>fs.readdir读取目录</h3><p>读取目录下的文件，也可以读取目录下的文件夹</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.readdir(<span class="string">&#x27;./html5&#x27;</span>,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(data);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-rename重命名"><a href="#fs-rename重命名" class="headerlink" title="fs.rename重命名"></a>fs.rename重命名</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.rename(<span class="string">&#x27;./css/base.css&#x27;</span>,<span class="string">&#x27;./css/index.css&#x27;</span>,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;重命名完成&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">同时他还能执行移动操作</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.rename(<span class="string">&#x27;./css/index.css&#x27;</span>,<span class="string">&#x27;./html5/base.css&#x27;</span>,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;移动完成&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-rmdir删除目录"><a href="#fs-rmdir删除目录" class="headerlink" title="fs.rmdir删除目录"></a>fs.rmdir删除目录</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.rmdir(<span class="string">&#x27;./html6&#x27;</span>,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;删除目录成功&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-unlink删除文件"><a href="#fs-unlink删除文件" class="headerlink" title="fs.unlink删除文件"></a>fs.unlink删除文件</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"></span><br><span class="line">fs.unlink(<span class="string">&#x27;./html5/html6/del.html&#x27;</span>,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;删除成功&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="模板字符串"><a href="#模板字符串" class="headerlink" title="模板字符串"></a>模板字符串</h3><p>注意不是‘ ’是``</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> name=<span class="string">&#x27;张三&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> age=<span class="number">20</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;name&#125;</span>的年龄是<span class="subst">$&#123;age&#125;</span>`</span>);</span><br></pre></td></tr></table></figure>


<h3 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> team=&#123;</span><br><span class="line"></span><br><span class="line">      name:[<span class="string">&#x27;tom&#x27;</span>,<span class="string">&#x27;bob&#x27;</span>],</span><br><span class="line">      teamName:<span class="string">&#x27;ES6&#x27;</span>,</span><br><span class="line">      teamSummary:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="built_in">this</span>.name.map(<span class="function">(<span class="params">items</span>)=&gt;</span> &#123;</span><br><span class="line">          <span class="comment">//当前this已经没有明确指向了,如果要明确，就得在上一个return之前先声明一个this；</span></span><br><span class="line">          <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;items&#125;</span>属于<span class="subst">$&#123;<span class="built_in">this</span>.teamName&#125;</span>分类下`</span></span><br><span class="line">          &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//普通写法</span></span><br><span class="line">    <span class="keyword">const</span> number=<span class="function"><span class="keyword">function</span>(<span class="params">number</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> number*<span class="number">2</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//箭头函数</span></span><br><span class="line">    <span class="keyword">const</span> number2=<span class="function">(<span class="params">number</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> number*<span class="number">2</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(number2(<span class="number">2</span>)) <span class="comment">//--&gt;4</span></span><br></pre></td></tr></table></figure>


<h2 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 异步处理</span></span><br><span class="line">    <span class="comment">// 处理结束后、调用resolve 或 reject</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">promise.then(onFulfilled).catch(onRejected)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> p=<span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve,reject</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> name=<span class="string">&#x27;张三&#x27;</span>;</span><br><span class="line">    resolve(name);</span><br><span class="line">  &#125;,<span class="number">1000</span>);</span><br><span class="line">&#125;)</span><br><span class="line">p.then(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<p>async是异步的简写，而await可以认为是async wait的简写。async用于申明一个异步的function,await用于等待一个异步方法执行完成</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&#x27;你好test&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(test());<span class="comment">//Promise &#123; &#x27;你好test&#x27; &#125;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//await必须得用在async的方法里面</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">var</span> name=<span class="string">&#x27;张三 232&#x27;</span>;</span><br><span class="line">      resolve(name);</span><br><span class="line">    &#125;,<span class="number">1000</span>);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">main</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> data=<span class="keyword">await</span> test();</span><br><span class="line">  <span class="built_in">console</span>.log(data);</span><br><span class="line">&#125;</span><br><span class="line">main();</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//寻找wwwroot下的目录，并把目录放入一个数组中</span></span><br><span class="line"><span class="keyword">const</span> &#123; rejects &#125; = <span class="built_in">require</span>(<span class="string">&#x27;assert&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> path=<span class="string">&#x27;./wwwroot&#x27;</span></span><br><span class="line"><span class="keyword">var</span> dirArr=[];</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">isDir</span>(<span class="params">path</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,rejects</span>)=&gt;</span>&#123;</span><br><span class="line">    fs.stat(path,<span class="function">(<span class="params">err,stats</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">if</span>(err)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(err);</span><br><span class="line">        rejects(err);</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span>(stats.isDirectory())&#123;</span><br><span class="line">        resolve(<span class="literal">true</span>);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">else</span>&#123;</span><br><span class="line">        resolve(<span class="literal">false</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;<span class="comment">//封装异步的isDir</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">main</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  fs.readdir(path,<span class="keyword">async</span> (err,data)=&gt;&#123;</span><br><span class="line">    <span class="keyword">if</span>(err)&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(err);</span><br><span class="line">      <span class="keyword">return</span> ;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;data.length;i++)&#123;</span><br><span class="line">      <span class="keyword">if</span>(<span class="keyword">await</span> isDir(path+<span class="string">&#x27;/&#x27;</span>+data[i]))&#123;<span class="comment">//for循环内部使用await判断</span></span><br><span class="line">        dirArr.push(data[i]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(dirArr);</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">main();</span><br></pre></td></tr></table></figure>
<h1 id="fs中的流以及管道流"><a href="#fs中的流以及管道流" class="headerlink" title="fs中的流以及管道流"></a>fs中的流以及管道流</h1><h3 id="fs-createReadStream-从文件流中读取数据"><a href="#fs-createReadStream-从文件流中读取数据" class="headerlink" title="fs.createReadStream 从文件流中读取数据"></a>fs.createReadStream 从文件流中读取数据</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> readStream=fs.createReadStream(<span class="string">&#x27;./data/input.txt&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> count=<span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> str=<span class="string">&#x27; &#x27;</span>;</span><br><span class="line">readStream.on(<span class="string">&#x27;data&#x27;</span>,<span class="function">(<span class="params">data</span>)=&gt;</span>&#123;</span><br><span class="line">  str+=data;</span><br><span class="line">  count++;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">readStream.on(<span class="string">&#x27;end&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(str);</span><br><span class="line">  <span class="built_in">console</span>.log(count);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">readStream.on(<span class="string">&#x27;error&#x27;</span>,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="fs-createWriteStream向文件中写入文件"><a href="#fs-createWriteStream向文件中写入文件" class="headerlink" title="fs.createWriteStream向文件中写入文件"></a>fs.createWriteStream向文件中写入文件</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> str=<span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">500</span>;i++)&#123;</span><br><span class="line">  str+=<span class="string">&#x27;我是从数据库获取的数据\n&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> writeStream=fs.createWriteStream(<span class="string">&#x27;./data/outpu.txt&#x27;</span>);</span><br><span class="line">writeStream.write(str);</span><br><span class="line"></span><br><span class="line"><span class="comment">//标记写入完成</span></span><br><span class="line">writeStream.end();</span><br><span class="line"></span><br><span class="line">writeStream.on(<span class="string">&#x27;finish&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;写入完成&#x27;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="使用管道流进行大文件的复制"><a href="#使用管道流进行大文件的复制" class="headerlink" title="使用管道流进行大文件的复制"></a>使用管道流进行大文件的复制</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fs=<span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> readStream=fs.createReadStream(<span class="string">&#x27;./data/aaa.jpg&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> writeSream=fs.createWriteStream(<span class="string">&#x27;./bbb.jpg&#x27;</span>);</span><br><span class="line">readStream.pipe(writeSream);</span><br></pre></td></tr></table></figure>


<h1 id="MongoDB数据库"><a href="#MongoDB数据库" class="headerlink" title="MongoDB数据库"></a>MongoDB数据库</h1><h3 id="基本操作"><a href="#基本操作" class="headerlink" title="基本操作"></a>基本操作</h3><ul>
<li>开始</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">mongo</span><br></pre></td></tr></table></figure>
<ul>
<li>使用数据库，创建数据库</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">use itying</span><br></pre></td></tr></table></figure>
<ul>
<li>向数据库的表中插入数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.表名.insert(&#123;<span class="string">&quot;name&quot;</span>:<span class="string">&quot;zhangsan&quot;</span>&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>查看数据库</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">show dbs</span><br></pre></td></tr></table></figure>
<ul>
<li>查看数据库中有哪些表</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">show collections</span><br></pre></td></tr></table></figure>
<ul>
<li>查看表中的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find()</span><br></pre></td></tr></table></figure>
<ul>
<li>删除数据库</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.dropDatabase();</span><br></pre></td></tr></table></figure>
<ul>
<li>删除集合</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.drop();<span class="comment">//中间是表的名字</span></span><br></pre></td></tr></table></figure>
<h3 id="查询"><a href="#查询" class="headerlink" title="查询"></a>查询</h3><ul>
<li>查找age=20的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find(&#123;<span class="string">&quot;age&quot;</span>:<span class="number">20</span>&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>查找age&gt;20的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find(&#123;<span class="string">&quot;age&quot;</span>:&#123;<span class="attr">$gt</span>:<span class="number">22</span>&#125;&#125;);<span class="comment">//大于  </span></span><br><span class="line">db.user.find(&#123;<span class="string">&quot;age&quot;</span>:&#123;<span class="attr">$gte</span>:<span class="number">22</span>&#125;&#125;);<span class="comment">//大于等于</span></span><br></pre></td></tr></table></figure>
<ul>
<li>查找age&lt;20的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find(&#123;<span class="string">&quot;age&quot;</span>:&#123;<span class="attr">$lt</span>:<span class="number">22</span>&#125;&#125;);<span class="comment">//小于</span></span><br><span class="line">db.user.find(&#123;<span class="string">&quot;age&quot;</span>:&#123;<span class="attr">$lte</span>:<span class="number">22</span>&#125;&#125;);<span class="comment">//小于等于</span></span><br></pre></td></tr></table></figure>
<ul>
<li>查询name中包含zhangsan的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find(&#123;<span class="attr">name</span>:<span class="regexp">/zhangsan/</span>&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>查询指定列name、age数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find(&#123;&#125;,&#123;<span class="attr">name</span>:<span class="number">1</span>,<span class="attr">age</span>:<span class="number">1</span>&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>按照年龄排序  1升序 -1降序</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find().sort(&#123;<span class="attr">age</span>:<span class="number">1</span>&#125;);</span><br><span class="line">db.user.find().sort(&#123;<span class="attr">age</span>:-<span class="number">1</span>&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>查找前5条数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find().limit(<span class="number">5</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>查找10条以后的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find().skip(<span class="number">10</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>查询数据的数量</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find().count();</span><br></pre></td></tr></table></figure>
<ul>
<li>or查询</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find(&#123;<span class="attr">$or</span>:[&#123;<span class="attr">age</span>:<span class="number">22</span>&#125;,&#123;<span class="attr">age</span>:<span class="number">25</span>&#125;]&#125;);</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</h3><ul>
<li>修改一个</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.admin.update(&#123;<span class="string">&quot;username&quot;</span>:<span class="string">&quot;zhangsan0&quot;</span>&#125;,&#123;<span class="attr">$set</span>:&#123;<span class="string">&quot;username&quot;</span>:<span class="string">&quot;张三&quot;</span>&#125;&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>修改多个</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.admin.update(&#123;<span class="string">&quot;age&quot;</span>:<span class="number">101</span>&#125;,&#123;<span class="attr">$set</span>:&#123;<span class="string">&quot;username&quot;</span>:<span class="string">&quot;zhangsan1&quot;</span>&#125;&#125;,&#123;<span class="attr">multi</span>:<span class="literal">true</span>&#125;);</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h3><ul>
<li>匹配项删除</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.admin.remove(&#123;<span class="string">&quot;username&quot;</span>:<span class="string">&quot;zhangsan1&quot;</span>&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>只删除一个</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.admin.remove(&#123;<span class="string">&quot;username&quot;</span>:<span class="string">&quot;zhangsan1&quot;</span>&#125;,&#123;<span class="attr">justOne</span>:<span class="literal">true</span>&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="获取查询时间"><a href="#获取查询时间" class="headerlink" title="获取查询时间"></a>获取查询时间</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.find(&#123;<span class="attr">username</span>:<span class="string">&quot;zhangsan1&quot;</span>&#125;).explain(<span class="string">&quot;executionStats&quot;</span>);</span><br></pre></td></tr></table></figure>


<h3 id="索引基础"><a href="#索引基础" class="headerlink" title="索引基础"></a>索引基础</h3><ul>
<li>创建索引的命令</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.username.ensureIndex(&#123;<span class="string">&quot;username&quot;</span>:<span class="number">1</span>&#125;);</span><br></pre></td></tr></table></figure>
<p>语法中 Key 值为你要创建的索引字段，1 为指定按升序创建索引，如果你想按降序来创建索引指定为 -1 即可。</p>
<ul>
<li>获取当前集合的索引</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.getIndexes();</span><br></pre></td></tr></table></figure>
<ul>
<li>删除索引的命令</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.dropIndex(&#123;<span class="string">&quot;username&quot;</span>:<span class="number">1</span>&#125;);</span><br></pre></td></tr></table></figure>


<h4 id="复合索引"><a href="#复合索引" class="headerlink" title="复合索引"></a>复合索引</h4><ul>
<li>创建复合索引</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.user.ensureIndex(&#123;<span class="string">&quot;username&quot;</span>:<span class="number">1</span>,<span class="string">&quot;age&quot;</span>:-<span class="number">1</span>&#125;);</span><br></pre></td></tr></table></figure>
<h4 id="唯一索引"><a href="#唯一索引" class="headerlink" title="唯一索引"></a>唯一索引</h4><p>如果再次插入userid重复的文档时，MongoDB将报错，提示插入重复键</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.username.ensureIndex(&#123;<span class="string">&quot;username&quot;</span>:<span class="number">1</span>&#125;,&#123;<span class="string">&quot;unique&quot;</span>:<span class="literal">true</span>&#125;);</span><br></pre></td></tr></table></figure>


<h2 id="MongoDB账户权限配置"><a href="#MongoDB账户权限配置" class="headerlink" title="MongoDB账户权限配置"></a>MongoDB账户权限配置</h2><ul>
<li>创建超级管理用户</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">use admin</span><br><span class="line"></span><br><span class="line">db.createUser(&#123;</span><br><span class="line">    user:<span class="string">&#x27;admin&#x27;</span>,</span><br><span class="line">    pwd:<span class="string">&#x27;12345&#x27;</span>,</span><br><span class="line">    roles:[&#123;<span class="attr">role</span>:<span class="string">&#x27;root&#x27;</span>,<span class="attr">db</span>:<span class="string">&#x27;admin&#x27;</span>&#125;]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>使用超级管理用户连接数据库</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">mongo admin -u admin -p <span class="number">12345</span></span><br><span class="line">mongo <span class="number">192.168</span><span class="number">.1</span><span class="number">.200</span><span class="number">.27017</span>/test -u user -p password</span><br></pre></td></tr></table></figure>
<ul>
<li>给一个数据库创建管理员</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">use itying</span><br><span class="line"></span><br><span class="line">db.createUser(&#123;</span><br><span class="line">    user:<span class="string">&quot;littleadmin&quot;</span>,</span><br><span class="line">    pwd:<span class="string">&quot;12345&quot;</span>,</span><br><span class="line">    roles:[&#123;<span class="attr">role</span>:<span class="string">&quot;dbOwner&quot;</span>,<span class="attr">db</span>:<span class="string">&#x27;itying&#x27;</span>&#125;]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>使用数据库用户连接数据库</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">mongo itying -u littleadmin -p <span class="number">12345</span></span><br></pre></td></tr></table></figure>
<ul>
<li>删除数据库管理员</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.dropUser(<span class="string">&quot;littleadmin&quot;</span>);</span><br></pre></td></tr></table></figure>
<h1 id="node-js-连接数据库"><a href="#node-js-连接数据库" class="headerlink" title="node.js 连接数据库"></a>node.js 连接数据库</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> MongoClient = <span class="built_in">require</span>(<span class="string">&#x27;mongodb&#x27;</span>).MongoClient;</span><br><span class="line"><span class="comment">//定义数据库连接的地址</span></span><br><span class="line"><span class="keyword">const</span> url = <span class="string">&#x27; mongodb://127.0.0.1:27017/&#x27;</span>;</span><br><span class="line"><span class="comment">//定义要操作的数据库</span></span><br><span class="line"><span class="keyword">const</span> dbName = <span class="string">&#x27;itying&#x27;</span>;</span><br><span class="line"><span class="comment">//实例化MongoClient 传入数据库连接地址</span></span><br><span class="line"><span class="keyword">const</span> client = <span class="keyword">new</span> MongoClient(url, &#123; <span class="attr">useUnifiedTopology</span>: <span class="literal">true</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//连接数据库</span></span><br><span class="line">client.connect(<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;数据库连接成功&quot;</span>);</span><br><span class="line">  <span class="keyword">let</span> db=client.db(dbName);</span><br><span class="line">  client.close();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="查找数据"><a href="#查找数据" class="headerlink" title="查找数据"></a>查找数据</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.collection(<span class="string">&quot;user&quot;</span>).find(&#123;<span class="string">&quot;name&quot;</span>:<span class="string">&#x27;zhangsan&#x27;</span>&#125;).toArray(<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data);</span><br><span class="line">  client.close();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="增加数据"><a href="#增加数据" class="headerlink" title="增加数据"></a>增加数据</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.collection(<span class="string">&quot;user&quot;</span>).insertOne(&#123;<span class="string">&quot;name&quot;</span>:<span class="string">&quot;zhaosi&quot;</span>,<span class="string">&quot;age&quot;</span>:<span class="number">10</span>&#125;,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;增加失败&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;增加成功&quot;</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(data);</span><br><span class="line">  client.close();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="修改数据"><a href="#修改数据" class="headerlink" title="修改数据"></a>修改数据</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.collection(<span class="string">&quot;user&quot;</span>).updateOne(&#123;<span class="string">&quot;name&quot;</span>:<span class="string">&quot;zhangsan&quot;</span>&#125;,&#123;<span class="attr">$set</span>:&#123;<span class="string">&quot;age&quot;</span>:<span class="number">10</span>&#125;&#125;,<span class="function">(<span class="params">err,data</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;修改失败&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;修改成功&quot;</span>);</span><br><span class="line">  <span class="built_in">console</span>.log(data);</span><br><span class="line">  client.close();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="删除数据"><a href="#删除数据" class="headerlink" title="删除数据"></a>删除数据</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">db.collection(<span class="string">&quot;user&quot;</span>).deleteOne(&#123;<span class="string">&quot;name&quot;</span>:<span class="string">&quot;zhangsan&quot;</span>&#125;,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;删除失败&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;删除成功&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h1 id="Express"><a href="#Express" class="headerlink" title="Express"></a>Express</h1><h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><h4 id="安装express"><a href="#安装express" class="headerlink" title="安装express"></a>安装express</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i express --save</span><br></pre></td></tr></table></figure>
<h4 id="get，post，put，delete"><a href="#get，post，put，delete" class="headerlink" title="get，post，put，delete"></a>get，post，put，delete</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> express=<span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app=express()</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  res.send(<span class="string">&quot;你好express&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&quot;/login&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123; <span class="comment">//get:显示数据</span></span><br><span class="line">  res.send(<span class="string">&quot;登入&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.post(<span class="string">&quot;/doLogin&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123; <span class="comment">//post:增加数据</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;执行登入了&quot;</span>);</span><br><span class="line">  res.send(<span class="string">&quot;执行登入&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.put(<span class="string">&quot;/editUser&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123; <span class="comment">//put:用于修改数据</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;修改用户&quot;</span>);</span><br><span class="line">  res.send(<span class="string">&quot;修改用户&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.delete(<span class="string">&quot;/deleteUser&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123; <span class="comment">//delete:用于删除数据</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;执行删除&quot;</span>);</span><br><span class="line">  res.send(<span class="string">&quot;执行删除&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br></pre></td></tr></table></figure>


<h4 id="多级路由"><a href="#多级路由" class="headerlink" title="多级路由"></a>多级路由</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">app.get(<span class="string">&quot;/admin/user/add&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123; <span class="comment">//get:显示数据</span></span><br><span class="line">  res.send(<span class="string">&quot;admin user&quot;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h4 id="动态路由"><a href="#动态路由" class="headerlink" title="动态路由"></a>动态路由</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">app.get(<span class="string">&quot;/article/:id&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123; <span class="comment">//get:显示数据</span></span><br><span class="line">  <span class="keyword">var</span> id=req.params[<span class="string">&quot;id&quot;</span>];</span><br><span class="line">  res.send(<span class="string">&quot;动态路由+&quot;</span>+id)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<p><strong>配置路由的时候需要注意顺序，多级路由和动态路由，如果多级路由在后面，会自动匹配成id</strong></p>
<h3 id="get传值"><a href="#get传值" class="headerlink" title="get传值"></a>get传值</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">app.get(<span class="string">&quot;/product&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> query = req.query;</span><br><span class="line">  <span class="built_in">console</span>.log(query);</span><br><span class="line">  res.send(<span class="string">&quot;product&quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">输入：</span><br><span class="line">http:<span class="comment">//localhost:3000/product?id=123&amp;cid=1234</span></span><br><span class="line"></span><br><span class="line">terminal输出：</span><br><span class="line">&#123; <span class="attr">id</span>: <span class="string">&#x27;123&#x27;</span>, <span class="attr">cid</span>: <span class="string">&#x27;1234&#x27;</span> &#125;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="ejs"><a href="#ejs" class="headerlink" title="ejs"></a>ejs</h2><h4 id="安装ejs"><a href="#安装ejs" class="headerlink" title="安装ejs"></a>安装ejs</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i ejs --save</span><br></pre></td></tr></table></figure>
<h4 id="ejs基本使用"><a href="#ejs基本使用" class="headerlink" title="ejs基本使用"></a>ejs基本使用</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> express=<span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app=express()</span><br><span class="line">app.set(<span class="string">&quot;view engine&quot;</span>,<span class="string">&quot;ejs&quot;</span>)</span><br><span class="line">app.get(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> title = <span class="string">&quot;你好ejs&quot;</span>;</span><br><span class="line">  res.render(<span class="string">&quot;index&quot;</span>,&#123;</span><br><span class="line">    title:title</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.listen(<span class="number">3000</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//index.ejs</span></span><br><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">  &lt;meta name=<span class="string">&quot;viewport&quot;</span> content=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;h2&gt;我是ejs模板&lt;/h2&gt;</span><br><span class="line">  &lt;p&gt;&lt;%=title%&gt;&lt;<span class="regexp">/p&gt;  /</span><span class="regexp">/ejs绑定html数据</span></span><br><span class="line"><span class="regexp">&lt;/</span>body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h4 id="ejs-进阶使用"><a href="#ejs-进阶使用" class="headerlink" title="ejs 进阶使用"></a>ejs 进阶使用</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">app.get(<span class="string">&quot;/news&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> userinfo=&#123;</span><br><span class="line">    username:<span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    age:<span class="number">20</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> article=<span class="string">&quot;&lt;h3&gt;我是一个H3&lt;/h3&gt;&quot;</span> </span><br><span class="line">  res.render(<span class="string">&quot;news&quot;</span>,&#123;</span><br><span class="line">    userinfo:userinfo,</span><br><span class="line">    article:article</span><br><span class="line">    score:<span class="number">60</span>;<span class="comment">//写死的数据</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//news.ejs</span></span><br><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">  &lt;meta name=<span class="string">&quot;viewport&quot;</span> content=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;h2&gt;我是一个ejs模板引擎--新闻界面&lt;/h2&gt;</span><br><span class="line">  &lt;h4&gt;&lt;%=userinfo.username  %&gt; ----&lt;%=userinfo.age%&gt;&lt;/h4&gt;</span><br><span class="line">  &lt;p&gt;&lt;%-article%&gt;&lt;/p&gt;     </span><br><span class="line">&lt;!-- 需要解析就不用等号，用- --&gt;</span><br><span class="line"></span><br><span class="line">  &lt;h2&gt;条件判断&lt;/h2&gt;</span><br><span class="line">  &lt;%<span class="keyword">if</span>(score&gt;=<span class="number">60</span>)&#123;%&gt;</span><br><span class="line">    &lt;p&gt;及格&lt;/p&gt;</span><br><span class="line">  &lt;%&#125;<span class="keyword">else</span>&#123;%&gt;</span><br><span class="line">    &lt;p&gt;不及格&lt;/p&gt;</span><br><span class="line">  &lt;%&#125;%&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>解析html</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;&lt;%-article%&gt;&lt;/p&gt;     </span><br></pre></td></tr></table></figure>
<ul>
<li>对象</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;h4&gt;&lt;%=userinfo.username  %&gt; ----&lt;%=userinfo.age%&gt;&lt;/h4&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>条件判断</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;h2&gt;条件判断&lt;/h2&gt;</span><br><span class="line">&lt;%<span class="keyword">if</span>(score&gt;=<span class="number">60</span>)&#123;%&gt;</span><br><span class="line">  &lt;p&gt;及格&lt;/p&gt;</span><br><span class="line">&lt;%&#125;<span class="keyword">else</span>&#123;%&gt;</span><br><span class="line">  &lt;p&gt;不及格&lt;/p&gt;</span><br><span class="line">&lt;%&#125;%&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>列表</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;h2&gt;循环遍历&lt;/h2&gt;</span><br><span class="line"> &lt;ul&gt;</span><br><span class="line"> &lt;%<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;list.length;i++)&#123;%&gt;</span><br><span class="line">   &lt;li&gt;&lt;%=list[i]%&gt;&lt;/li&gt;</span><br><span class="line"> &lt;%&#125;%&gt;</span><br><span class="line"> &lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>引入其他ejs文件</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;%-include(<span class="string">&#x27;footer.ejs&#x27;</span>)%&gt;</span><br></pre></td></tr></table></figure>
<p>配置静态web目录</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">app.use(express.static(<span class="string">&quot;static&quot;</span>))</span><br><span class="line"></span><br><span class="line">&lt;link rel=<span class="string">&quot;stylesheet&quot;</span> href=<span class="string">&quot;/css/base.css&quot;</span>&gt;</span><br></pre></td></tr></table></figure>
<h2 id="express-中间件"><a href="#express-中间件" class="headerlink" title="express 中间件"></a>express 中间件</h2><h4 id="应用级中间件"><a href="#应用级中间件" class="headerlink" title="应用级中间件"></a>应用级中间件</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//应用级中间件(用于权限判断)</span></span><br><span class="line">app.use(<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br><span class="line">    next();</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure>


<h4 id="路由中间件"><a href="#路由中间件" class="headerlink" title="路由中间件"></a>路由中间件</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//路由中间件（不常见）</span></span><br><span class="line">app.get(<span class="string">&quot;/admin/user/add&quot;</span>,<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123; <span class="comment">//get:显示数据</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;多级路由&quot;</span>);</span><br><span class="line">  next();</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.get(<span class="string">&quot;/admin/user/:id&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123; <span class="comment">//get:显示数据</span></span><br><span class="line">  <span class="keyword">var</span> id=req.params[<span class="string">&quot;id&quot;</span>];</span><br><span class="line">  res.send(<span class="string">&quot;动态路由+&quot;</span>+id)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h4 id="错误处理中间件"><a href="#错误处理中间件" class="headerlink" title="错误处理中间件"></a>错误处理中间件</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">app.use(<span class="function">(<span class="params">req,res,next</span>)=&gt;</span>&#123;</span><br><span class="line">  res.status(<span class="number">404</span>).send(<span class="string">&quot;404&quot;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h4 id="内置中间件-静态"><a href="#内置中间件-静态" class="headerlink" title="内置中间件(静态)"></a>内置中间件(静态)</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//内置中间件</span></span><br><span class="line">app.use(express.static(<span class="string">&quot;static&quot;</span>))</span><br></pre></td></tr></table></figure>


<h4 id="第三方中间件"><a href="#第三方中间件" class="headerlink" title="第三方中间件"></a>第三方中间件</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">e.g</span><br><span class="line">bodyParser</span><br><span class="line">app.get(<span class="string">&quot;/login&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  res.render(<span class="string">&quot;form&quot;</span>,&#123;&#125;)</span><br><span class="line">  </span><br><span class="line">&#125;)</span><br><span class="line">app.post(<span class="string">&quot;/dologin&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> body = req.body;</span><br><span class="line">  <span class="built_in">console</span>.log(body);</span><br><span class="line">  res.send(<span class="string">&quot;执行提交&quot;</span>+body.username)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">//form.ejs</span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;/css/base.css&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>post<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;/doLogin&quot;</span> <span class="attr">method</span>=<span class="string">&quot;POST&quot;</span>&gt;</span></span><br><span class="line">  用户名:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span>&gt;</span></span><br><span class="line">  密码: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="express-router"><a href="#express-router" class="headerlink" title="express.router"></a>express.router</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> bodyParser = <span class="built_in">require</span>(<span class="string">&#x27;body-parser&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> express=<span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> router= express.Router()</span><br><span class="line"></span><br><span class="line">router.get(<span class="string">&quot;/&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  res.render(<span class="string">&quot;form&quot;</span>,&#123;&#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">router.post(<span class="string">&quot;/doLogin&quot;</span>,<span class="function">(<span class="params">req,res</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> body=req.body;</span><br><span class="line">  res.send(<span class="string">&quot;执行提交&quot;</span>+body.username)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = router</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//app.js</span></span><br><span class="line"><span class="comment">//引入login</span></span><br><span class="line"><span class="keyword">const</span> login = <span class="built_in">require</span>(<span class="string">&quot;./router/login&quot;</span>)</span><br><span class="line"><span class="comment">//挂载login模块</span></span><br><span class="line">app.use(<span class="string">&quot;/login&quot;</span>,login)</span><br></pre></td></tr></table></figure>


<h2 id="express和mongoose"><a href="#express和mongoose" class="headerlink" title="express和mongoose"></a>express和mongoose</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> mongoose = <span class="built_in">require</span>(<span class="string">&#x27;mongoose&#x27;</span>)</span><br><span class="line"></span><br><span class="line">mongoose.connect(<span class="string">&#x27;mongodb://127.0.0.1:27017/users&#x27;</span>)</span><br><span class="line"><span class="comment">//定义一个Schema Schema里面对象和数据库里面字段要一一对应</span></span><br><span class="line"><span class="keyword">var</span> UserSchema=mongoose.Schema(&#123;</span><br><span class="line">  name:<span class="built_in">String</span>,</span><br><span class="line">  phone:<span class="built_in">Number</span>,</span><br><span class="line">  status:<span class="built_in">Number</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//model里第一个参数会自动和数据库的复数对应起来</span></span><br><span class="line"><span class="keyword">var</span> User=mongoose.model(<span class="string">&#x27;User&#x27;</span>,UserSchema);</span><br></pre></td></tr></table></figure>
<h4 id="查询users表的数据"><a href="#查询users表的数据" class="headerlink" title="查询users表的数据"></a>查询users表的数据</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//查询users表的数据</span></span><br><span class="line"></span><br><span class="line">User.find(&#123;&#125;,<span class="function"><span class="keyword">function</span>(<span class="params">err,doc</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(doc);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="增加数据-1"><a href="#增加数据-1" class="headerlink" title="增加数据"></a>增加数据</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//增加数据</span></span><br><span class="line"><span class="comment">//通过实例化Model 创建增加的数据</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> u=<span class="keyword">new</span> User(&#123;</span><br><span class="line">  name:<span class="string">&#x27;李四&#x27;</span>,</span><br><span class="line">  age:<span class="number">20</span>,</span><br><span class="line">  status:<span class="number">1</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">u.save(<span class="function"><span class="keyword">function</span>(<span class="params">err</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;success&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="更新数据"><a href="#更新数据" class="headerlink" title="更新数据"></a>更新数据</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//更新数据</span></span><br><span class="line"></span><br><span class="line">User.updateOne(&#123;<span class="string">&quot;name&quot;</span>:<span class="string">&quot;李四&quot;</span>&#125;,&#123;<span class="string">&quot;name&quot;</span>:<span class="string">&quot;吴明泽&quot;</span>&#125;,<span class="function"><span class="keyword">function</span>(<span class="params">err,doc</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">console</span>.log(err);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;成功&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="删除数据-1"><a href="#删除数据-1" class="headerlink" title="删除数据"></a>删除数据</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//删除数据</span></span><br><span class="line"></span><br><span class="line">User.deleteOne(&#123;<span class="string">&quot;age&quot;</span>:&#123;<span class="attr">$gte</span>:<span class="number">2</span>&#125;&#125;,<span class="function"><span class="keyword">function</span>(<span class="params">err,res</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">console</span>.log(err);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;成功&quot;</span>);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h3 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//app.js</span></span><br><span class="line"><span class="keyword">var</span> UserModel=<span class="built_in">require</span>(<span class="string">&#x27;./user&#x27;</span>);</span><br><span class="line"></span><br><span class="line">UserModel.find(&#123;&#125;,<span class="function"><span class="keyword">function</span>(<span class="params">err,doc</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(doc);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//db.js  用来连接数据库</span></span><br><span class="line"><span class="keyword">const</span> mongoose = <span class="built_in">require</span>(<span class="string">&#x27;mongoose&#x27;</span>)</span><br><span class="line"></span><br><span class="line">mongoose.connect(<span class="string">&#x27;mongodb://127.0.0.1:27017/users&#x27;</span>,&#123;<span class="attr">useNewUrlParser</span>:<span class="literal">true</span>&#125;,<span class="function">(<span class="params">err</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(err)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(err);</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;数据库连接成功&quot;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//定义一个Schema Schema里面对象和数据库里面字段要一一对应</span></span><br><span class="line"><span class="built_in">module</span>.exports=mongoose;</span><br><span class="line"></span><br><span class="line"><span class="comment">//user.js 配置Schema</span></span><br><span class="line"><span class="keyword">var</span> mongoose=<span class="built_in">require</span>(<span class="string">&#x27;./db.js&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> UserSchema=mongoose.Schema(&#123;</span><br><span class="line">  name:<span class="built_in">String</span>,</span><br><span class="line">  phone:<span class="built_in">Number</span>,</span><br><span class="line">  status:<span class="built_in">Number</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> UserModel=mongoose.model(<span class="string">&#x27;user&#x27;</span>,UserSchema);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports=UserModel;</span><br></pre></td></tr></table></figure>


<h2 id="Nginx配置"><a href="#Nginx配置" class="headerlink" title="Nginx配置"></a>Nginx配置</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">#user  nobody;</span><br><span class="line">worker_processes  <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">#error_log  logs/error.log;</span><br><span class="line">#error_log  logs/error.log  notice;</span><br><span class="line">#error_log  logs/error.log  info;</span><br><span class="line"></span><br><span class="line">#pid        logs/nginx.pid;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">events &#123;</span><br><span class="line">    worker_connections  <span class="number">1024</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">http &#123;</span><br><span class="line">    include       mime.types;</span><br><span class="line">    default_type  application/octet-stream;</span><br><span class="line"></span><br><span class="line">    #log_format  main  <span class="string">&#x27;$remote_addr - $remote_user [$time_local] &quot;$request&quot; &#x27;</span></span><br><span class="line">    #                  &#x27;$status $body_bytes_sent &quot;$http_referer&quot; &#x27;</span><br><span class="line">    #                  &#x27;&quot;$http_user_agent&quot; &quot;$http_x_forwarded_for&quot;&#x27;;</span><br><span class="line"></span><br><span class="line">    #access_log  logs/access.log  main;</span><br><span class="line"></span><br><span class="line">    sendfile        on;</span><br><span class="line">    #tcp_nopush     on;</span><br><span class="line"></span><br><span class="line">    #keepalive_timeout  <span class="number">0</span>;</span><br><span class="line">    keepalive_timeout  <span class="number">65</span>;</span><br><span class="line"></span><br><span class="line">    #gzip  on;</span><br><span class="line"></span><br><span class="line">    server &#123;</span><br><span class="line">        listen       <span class="number">9999</span>;</span><br><span class="line">        server_name  <span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span>;</span><br><span class="line"></span><br><span class="line">        #charset koi8-r;</span><br><span class="line"></span><br><span class="line">        #access_log  logs/host.access.log  main;</span><br><span class="line"></span><br><span class="line">        location / &#123;</span><br><span class="line">             root   html;            </span><br><span class="line">		try_files $uri $uri/ /index.html;             </span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        location /apis/&#123;</span><br><span class="line">    	      proxy_pass	http:<span class="comment">//127.0.0.1:3000/; # 将地址代理到api上</span></span><br><span class="line">   	 &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        #error_page  <span class="number">404</span>              /<span class="number">404.</span>html;</span><br><span class="line"></span><br><span class="line">        # redirect server error pages to the static page /50x.html</span><br><span class="line">        #</span><br><span class="line">        error_page   <span class="number">500</span> <span class="number">502</span> <span class="number">503</span> <span class="number">504</span>  /50x.html;</span><br><span class="line">        location = /50x.html &#123;</span><br><span class="line">            root   html;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        # proxy the PHP scripts to Apache listening on 127.0.0.1:80</span><br><span class="line">        #</span><br><span class="line">        #location ~ \.php$ &#123;</span><br><span class="line">        #    proxy_pass   http://127.0.0.1;</span><br><span class="line">        #&#125;</span><br><span class="line"></span><br><span class="line">        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000</span><br><span class="line">        #</span><br><span class="line">        #location ~ \.php$ &#123;</span><br><span class="line">        #    root           html;</span><br><span class="line">        #    fastcgi_pass   127.0.0.1:9000;</span><br><span class="line">        #    fastcgi_index  index.php;</span><br><span class="line">        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;</span><br><span class="line">        #    include        fastcgi_params;</span><br><span class="line">        #&#125;</span><br><span class="line"></span><br><span class="line">        # deny access to .htaccess files, if Apache&#x27;s document root</span><br><span class="line">        # concurs with nginx&#x27;s one</span><br><span class="line">        #</span><br><span class="line">        #location ~ /\.ht &#123;</span><br><span class="line">        #    deny  all;</span><br><span class="line">        #&#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    # another virtual host using mix of IP-, name-, and port-based configuration</span><br><span class="line">    #</span><br><span class="line">    #server &#123;</span><br><span class="line">    #    listen       8000;</span><br><span class="line">    #    listen       somename:8080;</span><br><span class="line">    #    server_name  somename  alias  another.alias;</span><br><span class="line"></span><br><span class="line">    #    location / &#123;</span><br><span class="line">    #        root   html;</span><br><span class="line">    #        index  index.html index.htm;</span><br><span class="line">    #    &#125;</span><br><span class="line">    #&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    # HTTPS server</span><br><span class="line">    #</span><br><span class="line">    #server &#123;</span><br><span class="line">    #    listen       443 ssl;</span><br><span class="line">    #    server_name  localhost;</span><br><span class="line"></span><br><span class="line">    #    ssl_certificate      cert.pem;</span><br><span class="line">    #    ssl_certificate_key  cert.key;</span><br><span class="line"></span><br><span class="line">    #    ssl_session_cache    shared:SSL:1m;</span><br><span class="line">    #    ssl_session_timeout  5m;</span><br><span class="line"></span><br><span class="line">    #    ssl_ciphers  HIGH:!aNULL:!MD5;</span><br><span class="line">    #    ssl_prefer_server_ciphers  on;</span><br><span class="line"></span><br><span class="line">    #    location / &#123;</span><br><span class="line">    #        root   html;</span><br><span class="line">    #        index  index.html index.htm;</span><br><span class="line">    #    &#125;</span><br><span class="line">    #&#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>





































      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/6/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/6/">6</a><span class="page-number current">7</span>
  </nav>


<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Lawted Wu</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="Total Visitors">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="Total Views">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  


  <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>


<script>
var options = {
  bottom: '64px', // default: '32px'
  right: '32px', // default: '32px'
  left: 'unset', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#000',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: true, // default: true,
  label: ' ', // default: ''
  autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  






  
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
